0

styleHTML 要素の属性から CSS プロパティを取得するにはどうすればよいですか(そしてスタイルシート/計算されたプロパティを無視します)?

例えば：

<div style="float:left"></div>

function getStyle(element, name) { ... }
getStyle(element, 'float') === 'left';
getStyle(element, 'font-weight') === null;

生の JS でも jQuery でもかまいません。

4

5 に答える 5

2

これはうまくいきませんか？

$('div').attr('style');

これをさらに解析したい場合：

var getStyles = function(element) {

    // ensure element has style
    if (! element.attr('style')) {
        return {};
    }

    // init styles
    var styles = {}

    // parse style attr
    $.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
        if (style.length) { // a style string ending in ; will cause an empty pair after splitting
            pair = style.split(/\s*:\s*/);
            styles[pair[0]] = pair[1];
        }
    });

    return styles;
};

いくつかのテスト

// test an element with style attr
var element = $('<div style="float:left"></div>');
console.log(getStyles(element)); //=> {float: "left"}
console.log(getStyles(element).float); //=> left
console.log(getStyles(element).hello); //=> undefined

// test some element without style attr
var element2 = $('<p>hello</p>');
console.log(getStyles(element2).float); //=> undefined
console.log(getStyles(element2).hello); //=> undefined

​// a bit more complex
var element3 = $('<div style="float:left; background-color:red; color:#555; opacity: 0.5 !important;"></div>');
console.log(getStyles(element3)); //=> {float: "left", opacity: "0.5 !important", background-color: "red", color: "#555"} 
console.log(getStyles(element3).float); //=> left
console.log(getStyles(element3).opacity) //=> 0.5 !important;
console.log(getStyles(element3)["background-color"]); //=> red

</p>

jsFiddle での動作を確認してください

</p>

于 2012-11-27T04:37:11.020 に答える
2

純粋なJSが必要な場合、この例:

element.style.display = 'none';
于 2012-11-27T04:40:24.623 に答える
0

使用できます

var floating = $('div').css('float');
$('div').css('float','left');

jQueryで各スタイリングパラメータにアクセスする。

于 2012-11-27T04:38:47.430 に答える
0

prop()関数経由でアクセスすることもできます

$('div').prop('style');
于 2012-11-27T04:44:50.590 に答える
0

これは macek のコードの簡単な改善です。

この関数は、Petah が要求する形式です。さらに、この関数は一致が見つかるとすぐに中断されるため、「スタイル」属性全体をスキャンする必要がなくなります。

function getStyle(element, name) {

if (! element.attr('style')) {
    return {};
}
var result= "";

$.each(element.attr('style').split(/\s*;\s*/), function(i,style) {
    if (style.length) { 
        pair = style.split(/\s*:\s*/);
        if(pair[0] == name) {
            result = pair[1];
            return false;
        }
    }
});

return result;
};

使用例の Js Fiddle : http://jsfiddle.net/rxpMJ/2/

于 2012-11-27T05:33:43.067 に答える