x-eq

x Element Query.

Usage no npm install needed!

<script type="module">
  import xEq from 'https://cdn.skypack.dev/x-eq';
</script>

README

x-eq

NPM version GitHub version

x Element Query.

Install

Node

npm install --save x-eq

Usage

新添加了四个 element query: max-width, max-height, min-width, min-height

div[max-width~=800px] {
  /* ... */
}

div[max-width~=600px] {
  /* ... */
}

Example

Notice

  • 因为需要用到属性选择器,所以最低支持到 IE7;另外 IE7 需要引入 jQuery 1.x.x,而且 IE7 中只能支持 px 单位,其它单位不支持
  • 跨域的 stylesheet 不会处理,带 data-xeq-bypass 属性的 stylesheet 也不会处理
  • 如果不想要脚本自动运行(通常 install/uninstall 之前需要禁止脚本自动运行),需要要引用此脚本之前设置 window.noAutoRunXEQ = true;

API

install(key, fn)

安装一个 key, fn 的参数是 (element, attribute)

attribute 是一个 Object,包含下面几个属性

  • glue: 可以是 '''=', '*=', '^=', '$=', '~='
  • value: 当只有属性名时,此值是 true,否则是指定的字符串
  • numberValue: 如果 value 是个单位值,此值会将 value 转化成 px 单位,并只返回数字部分

当 fn 返回 true,表示需要添加此 attribute;否则删除此 attribute

uninstall(key)

删除安装了的 key

refresh()

当浏览器 resize 事件后,自动会执行 refresh;如果程序中有改变 DOM 大小,需要手动运行 refresh

run()

如果禁用了自动运行,或者有新的 key install,或有旧的 key uninstall,都需要重新 run

Reference

Browser CDN

x-eq.0.1.1.min.js

x-eq.0.1.1.js

x-eq.0.1.0.min.js

x-eq.0.1.0.js

x-eq.0.0.1.min.js

x-eq.0.0.1.js

License

Copyright (c) 2015 Zhonglei Qiu. Licensed under the MIT license.