prop

Module

Methods

dom.prop()
Object prop ( selector, name )
获取符合选择器的第一个元素的对应 property 值.
Parameters:
  • selector (string|HTMLCollection|Array<HTMLElement>) – 字符串表示 css3 选择器
  • name (string) – property 名称
Returns:

对应 property 的值

Note

  • 对于不存在的 property , 该方法返回 undefined
  • 注意区别该方法与 dom.attr, 也即区别 DOM property 与 attribute .
  • 请使用 dom.data 方法来处理自定义属性, 而不要使用 dom.prop 方法, 否则在 ie<9 下会有内存泄露.
  • prop 方法可以改变 DOM 元素的状态而不改变其对应的序列化 html 属性 ( IE <9 除外).

例如设置 inputbuttondisabled property 或者 checkboxchecked property . 最常见的情况即是用 prop 来设置 disabled 以及 checked 而不是 dom.attr . 而 dom.val 方法用来设置和读取 value property.

例如

var S = KISSY, DOM = S.DOM;
var c=DOM.create("<input type='checkbox' checked='checked'/>");
DOM.attr(c,"checked") // => "checked"
DOM.prop(c,"checked") // => true
DOM.attr(c,"nodeName") // => null
DOM.prop(c,"nodeName").toLowerCase() // => input
void prop ( selector, name, value )
给符合选择器的所有元素设置 property 值.
Parameters:
  • selector (string|HTMLCollection|Array<HTMLElement>) –

    字符串表示 css3 选择器

  • name (string) – property 名称
  • value – property 值
void prop ( selector, kv )
给符合选择器的所有元素设置 property 值.
Parameters:
  • selector (string|HTMLCollection|Array<HTMLElement>) –

    字符串表示 css3 选择器

  • kv (object) – property 名与 property 值的键值对

例如

var S = KISSY, DOM = S.DOM;

DOM.prop("input","disabled", false);
DOM.prop("input","checked", true);
DOM.val("input","someValue");

selectionStart/End 兼容

在 ie 下对于 selectionStart/End 做了兼容处理,demo :

KISSY.use('dom', function (S, DOM) {
    var t = DOM.get("#t");
    var b = DOM.get("#b");
    var s = DOM.get("#s");
    var e = DOM.get("#e");
    setTimeout(function () {
        t.value = "1\n2\n3\n4\n5\n6\n7";
        t.focus();
        DOM.prop(t, "selectionStart", 1);
        DOM.prop(t, "selectionEnd", t.value.length - 1);
    }, 0);
    b.onclick = function () {
        t.focus();
        alert(DOM.prop(t, "selectionStart") + " - " + DOM.prop(t, "selectionEnd"));
    };
    s.onclick = function () {
        t.focus();
        var next = DOM.prop(t, "selectionStart") + 1;
        if (typeof t.selectionStart != "number" && t.value.charAt(next) == "\n") {
            next++;
        }
        DOM.prop(t, "selectionStart", next);
    };

    e.onclick = function () {
        t.focus();
        var next = DOM.prop(t, "selectionEnd") - 1;
        if (typeof t.selectionEnd != "number" && t.value.charAt(next) == "\n") {
            next--;
        }
        DOM.prop(t, "selectionEnd", next);
    };
});