Question

我是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);    

    }

Answer 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;

Answer 2

使用jquery：

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

Answer 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属性值来获取元素

3 个答案: