如何使用javascript检查HTML样式属性是否存在答案

【问题标题】：How to check if HTML style attribute exists with javascript如何使用javascript检查HTML样式属性是否存在
【发布时间】：2013-09-09 05:19:54
【问题描述】：

我正在尝试找出特定元素是否具有内联样式属性：我确信有一个简单的方法可以检查这个，但我似乎找不到它。我已经尝试了多种方法，其中包括：

var contentWrapper = document.getElementById("contentWrapper");
if(contentWrapper.style.display.toString=="")
alert("Empty");
else
alert("Not Empty");

感谢您的帮助！

【问题讨论】：

How can I check if attribute exists or not in Jquery的可能重复
getAttribute('style')
另外，调用函数时要小心，确保添加括号。 display.toString == "" 正在比较 function ，当您想要比较函数的 返回值 时。应该是display.toString() == ""。（不是说你在这里需要.toString()，因为display 已经是一个字符串，但这是你的代码可能失败的另一个原因）
链接的两个副本在 jQuery 中提供了用户未明确要求的解决方案；因此，这不是其中任何一个问题的重复。

标签： javascript html css styles

【解决方案1】：

检查给定Id的样式属性是否存在

if(document.getElementById("idname").hasAttribute("style")){
  alert("Style attribute found");
}else{
  alert("Style attribute not found");
}

【讨论】：

【解决方案2】：

样式对象有一个length 属性，它告诉你元素是否有任何内联样式。这也避免了属性style 存在但为空的问题。

// Would be 0 if no styles are applied and > 0 if there are inline styles applied
contentWrapper.style.length
// So you can check for it like this
contentWrapper.style.length === 0

【讨论】：

【解决方案3】：

我第一次浏览此页面时错过了@plalx 的评论。

if (element.hasAttribute("style"))
{
    var styleText = element.getAttribute("style")
}

在相关说明中，关于样式...

//to get info about the end results of CSS
var computedStyle = element.currentStyle || getComputedStyle(element, null);

和

//to iterate over css styles from style tags or linked CSS
for i ...
    document.styleSheets[i].rules ...

//great for searching with
var elements = document.querySelectorAll(rules[i].selectorText);

【讨论】：

【解决方案4】：

if(!contentWrapper.getAttribute("style"))

或

if(contentWrapper.getAttribute("style")==null || 
   contentWrapper.getAttribute("style")=="")

以上几行对你有用（任何人都可以选择）。

在第二种解决方案中：

首先检查 style attribute 是否存在于元素中，第二次检查确保 style attribute 不作为 empty string 出现，例如<div id="contentWrapper" style="">

完整代码如下：

var contentWrapper = document.getElementById("contentWrapper");
if(contentWrapper.getAttribute("style")==null || contentWrapper.getAttribute("style")=="")
alert("Empty");
else
alert("Not Empty");

http://jsfiddle.net/mastermindw/fjuZW/（第一种解决方案）

http://jsfiddle.net/mastermindw/fjuZW/1/（第二个解决方案）

【讨论】：

重复检查是不必要的，因为null 和'' 都是假的。另外，developer.mozilla.org/en-US/docs/Web/API/element.hasAttribute 会更好。
第二次检查是确保 style 属性不作为空字符串出现，例如
我知道，但我的意思是 Boolean('') 是 false。所以if (!contentWrapper.getAttribute('style')) { //empty } 适用于null 或''。

【解决方案5】：

if(contentWrapper.getAttribute("style")){
    if(contentWrapper.getAttribute("style").indexOf("display:") != -1){
        alert("Not Empty");
    } else {
        alert("Empty");
    }
}

【讨论】：

这对于像“/* font-size: 24px; */”这样的注释字符串来说不是那么完美。在这种情况下，它就像 font-size 存在一样工作。