blear.core.attribute

1Introduction

2Example

var attribute = require('blear.core.attribute');

3Static

3.1.css(cssKey, cssVal): keyValMap

根据浏览器兼容性，返回兼容性的 css key-val 键值对。

attribute.css('appearance', 'none');
// => {key: "-webkit-appearance", val: "none"}

attribute.css('width', 123);
// => {key: "width", val: "123px"}

attribute.css('transform', {
    rotate: 10,
    scale: 0.2,
    translateX: 10
});
// => {key: "-webkit-transform", val: "rotate(10deg) scale(0.2) translateX(10)"}

3.1.1cssKey

  • 类型：String
  • 说明：标准 css 键

3.1.2cssVal

  • 类型：String | Number | Object
  • 说明：标准 css 值

3.1.3keyValMap

  • 类型：Object
  • 说明：包含 key、val 的键值对

3.1.4keyValMap.key

  • 类型：String
  • 说明：css 键

3.1.5keyValMap.val

  • 类型：String
  • 说明：css 值

3.2.style(el, cssKey, cssVal): cssVal

基于 attribute.css(cssKey, cssVal) 将 css 渲染到 el 上。

attribute.style(el, 'width', 100);
// => undefined

attribute.style(el, 'width');
// => "100px"

3.2.1el

  • 类型：HTMLElement

3.2.2cssKey

  • 类型：String
  • 说明：标准 css 键

3.2.3cssVal

  • 类型：String | Number | Object
  • 说明：标准 css 值，如果为空，则返回对应 cssKey 的样式

3.3.show(el, [display]): undefined

显示元素，设置元素的 display 为 block（默认）。

attribute.show(divEl);
attribute.show(spanEl, 'inline');

3.3.1el

  • 类型：HTMLElement

3.3.2display

  • 类型：String
  • 说明：显示样式
  • 默认："block"

3.4.hide(el): undefined

隐藏元素，设置元素的 display 为 none。

3.4.1el

  • 类型：HTMLElement

3.5.attr(el, attrKey, [attrVal]): attrVal

设置 DOM 属性。

attribute.attr(divEl, 'id', 'abc');

attribute.attr(divEl, 'id');
// => "abc"

3.5.1el

  • 类型：HTMLElement

3.5.2attrKey

  • 类型：String
  • 说明：标准属性键

3.5.3attrVal

  • 类型：String
  • 说明：标准属性值，如果为空，则为属性键返回值

3.6.removeAttr(el, attrKey): undefined

移除 DOM 原型。

attribute.removeAttr(divEl, 'id');

3.6.1el

  • 类型：HTMLElement

3.6.2attrKey

  • 类型：String
  • 说明：标准属性键

3.7.hasAttr(el, attrKey): hasAttr

判断 DOM 是否包含该属性键。

attribute.hasAttr(divEl, 'id');

3.7.1el

  • 类型：HTMLElement

3.7.2attrKey

  • 类型：String
  • 说明：标准属性键

3.7.3hasAttr

  • 类型：Boolean

3.8.prop(el, propKey, [propVal]): propVal

设置 DOM 特性。延伸：JS DOM 的attribute 与 property。

attribute.prop(divEl, 'xxxx', {a: 1});

attribute.prop(divEl, 'xxxx');
// => {a: 1}

3.8.1el

  • 类型：HTMLElement

3.8.2propKey

  • 类型：String
  • 说明：任意特性键

3.8.3propVal

  • 类型：*
  • 说明：任意特性值，如果为空，则为特性键返回值

3.9.data(el, dataKey, [dataVal]): dataVal

或者或设置 dataset。

attribute.data(divEl, 'aBc', [1, 2, 3]);
// <div data-a-b-c="[1, 2, 3]">

attribute.data(divEl, 'a-b-c');
// => [1, 2, 3]

3.9.1el

  • 类型：HTMLElement

3.9.2dataKey

  • 类型：String
  • 说明：任意属性键，会将驼峰形式转换为 - 分隔符小写形式

3.9.3dataVal

  • 类型：*
  • 说明：任意属性值，如果为空，则为属性键返回值

3.10.addClass(el, className): undefined

添加 DOM className。

attribute.addClass(divEl, 'classA');
attribute.addClass(divEl, 'classA classB');

3.10.1el

  • 类型：HTMLElement

3.10.2className

  • 类型：String
  • 说明：多个 className 使用空格分开

3.11.removeClass(el, className): undefined

移除 DOM className。

attribute.removeClass(divEl, 'classA');
attribute.removeClass(divEl, 'classA classB');

3.11.1el

  • 类型：HTMLElement

3.11.2className

  • 类型：String
  • 说明：多个 className 使用空格分开

3.12.hasClass(el, className): hasClass

判断 DOM 是否包含一个 className。

3.12.1el

  • 类型：HTMLElement

3.12.2className

  • 类型：String
  • 说明：只能是一个 className

3.12.3hasClass

  • 类型：Boolean

3.13.html(el, [html]): html

设置、获取 DOM 的 innerHTML。

attribute.html(divEl, '<b>Hello</b>');
// <div><b>Hello</b></div>

attribute.html(divEl);
// "<b>Hello</b>"

3.13.1el

  • 类型：HTMLElement

3.13.2html

  • 类型：String
  • 说明：如果为空，则为返回值

3.14.text(el, [text]): text

设置、获取 DOM 的 textContent。

attribute.text(divEl, '<b>Hello</b>');
// <div>&lt;b&gt;Hello&lt;/b&gt;</div>

attribute.text(divEl);
// "<b>Hello</b>"

3.14.1el

  • 类型：HTMLElement

3.14.2text

  • 类型：String
  • 说明：如果为空，则为返回值

4Dependencies

5Reference