如何内联获取具有特定 CSS 属性值的元素答案

【问题标题】：How to grab the element with certain CSS property value inline如何内联获取具有特定 CSS 属性值的元素
【发布时间】：2015-09-19 21:14:49
【问题描述】：

我是 Js 的新手。我试图从图像的opacity 设置为1 的图像数组中获取元素。请告诉我怎么可能。我尝试了hasAttribute，但我不知道如何与==1 进行比较，因为它给出了意想不到的结果。

   <ul id="fullscreenImagesList">
        <li><span class="fullscrnImgs"></span></li>
       <li> <span class="fullscrnImgs" style="opacity: 1;"></span> </li>
        <li><span class="fullscrnImgs"></span></li>
        <li><span class="fullscrnImgs"></span> </li>
        <li><span class="fullscrnImgs"></span> </li>
    </ul>

现在是 Js

var bigImages = [].slice.call(document.getElementsByClassName("fullscrnImgs"));
for (var i = 0; i < bigImages.length; i++) {

        var opac = bigImages[i].getAttribute("opacity");
        console.log(opac);    

    }

【问题讨论】：

你在用jQuery吗？
你确定它是一个属性而不是一个css样式吗？
取决于您的代码this 可能会有所帮助，但您可能能够更有效地实现相同的目标，但我们无法确定没有您的代码。所以请发布您的代码
您可能想使用console.log(some_value) 看看您得到了什么...
opacity 不是属性。这是一个 CSS 属性。当您说“图像数组”时，您是指 HTML <img> 元素的数组吗？

标签： javascript css

【解决方案1】：

如果您只是在元素的内联样式属性中寻找opacity 属性，如您的示例所示，那么

bigImages[i].style.opacity

会成功的。

整个解决方案是

var bigImages = document.getElementsByClassName("fullscrnImgs");
for (var i = 0; i < bigImages.length; i++) {
    var opac = bigImages[i].style.opacity;
    console.log(opac);    
}

然而，实际上opacity 是一个可以通过多种方式设置的CSS 属性；除了作为元素的内联样式属性外，它还可以通过 CSS 级联设置。检查元素实际不透明度的唯一可靠方法是使用getComputedStyle：

var opac = window.ComputedStyle(bigImages[i]).opacity;

【讨论】：

再次检查我的答案。它清楚地显示了如何获取元素的不透明度值。

【解决方案2】：

使用 jquery：

var image= $('img[opacity="1"]');

【讨论】：

jQuery 标记有问题吗？
但是opacity 是一个 CSS 属性，不是你可以用这种选择器处理的属性。

【解决方案3】：

如果你使用一个元素，你应该使用getAttribute方法

var opac = imageElement.getAttribute("opacity");

[编辑] 请务必检查变量是否已定义。这样的事情会做

if (typeof opac === 'undefined') {
    //opac is defined
}

[编辑 2] 如果您正在寻找 css 样式，请使用 window.getComputedStyle()

var style = window.getComputedStyle(imageElement);
var opacity = style.getPropertyValue("opacity");

【讨论】：

你可能想解释一下如何判断属性是否被定义？
但它不是一个属性，它是一个 CSS 属性。
如果属性不存在，则getAttribute 将返回null，而不是undefined。尽管所有这些都无关紧要，因为opacity 无论如何都不是可以用getAttribute 检索的属性。