使用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樣式屬性

回答

相關問題