使用JS访问HTML样式属性

如何从HTML元素的style属性获取CSS属性（并忽略样式表/计算属性）？使用JS访问HTML样式属性

E.g：

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

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

我不介意任何原始JS或jQuery的。

来源

2012-11-27 Petah

要小心你要求什么。 HTML属性和DOM属性是不同的东西，尽管HTML5试图使它们互相反映，但并非在所有浏览器中都是如此。很长一段时间，Firefox将属性和属性作为两个独立的东西来处理，IE将它们视为基本相同的东西（可能为什么HTML5试图采取中间路径，或多或少）。他们还不一致。 – RobG

如果你想纯JS，这个例子：

element.style.display = 'none';

来源

2012-11-27 04:40:24

似乎工作，我接受答案之前做更多的测试。 – Petah

这不适合你吗？

$('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

See it working on jsFiddle

来源

2012-11-27 04:37:11

请参阅我的更新 –

您可以使用

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

要使用jQuery访问每个造型参数。

来源

2012-11-27 04:38:47

这将返回样式表继承的值和/或计算的值。这不是我所追求的。 – Petah

好吧，现在我看到了差异，对不起！ –

，也可以通过prop()功能

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

来源

2012-11-27 04:44:50 Talha

访问这里有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捣鼓的用法示例：http://jsfiddle.net/rxpMJ/2/

来源

2012-11-27 05:33:43 Karan

使用JS访问HTML样式属性

回答

相关问题