如何读取由CSS类设置的DIV的属性值？

我有一个一流的DIV：如何读取由CSS类设置的DIV的属性值？

.myClass { 
    width : 40px; 
    height: 40px; 
    display:block; 
}

在HTML中，我宣布：

<div class = "myClass"> Hello</div>

我如何在JavaScript读这个div的财产 “显示” 的价值？

我想：

a = document.getElementsByClassName("myClass") 
console.log(a[0].style.display)

但我没有看到在控制台东西。

来源

2016-09-23 avazwij

'的console.log（A [0] .style.display）' –

的一个问题是在'getElementsByClass（）'，应该是'getElementsByClassName方法（）' – Mohammad

只有在使用内联样式设置“display”时，只有在[MDN上的HTMLElement.style]（https://developer.mozilla.org/en-US/）上设置'a.style.display'时才会返回值文档/网络/ API/HTML元素/风格）。 – 5aledmaged

您需要将所有的样式表后计算出 “计算” 风格（所产生的风格。这是通过调用getComputedStyle()完成。

var element = document.getElementsByClassName("myClass")[0]; 
 
var style = window.getComputedStyle(element).getPropertyValue('display'); 
 
console.log(style);

.myClass { 
 
    width : 40px; 
 
    height: 40px; 
 
    display:block; 
 
}

<div class="myClass"> Hello</div>

来源

2016-09-23 16:56:39

它很好用，谢谢！如果您有时间来帮助我最后一件事情：如果我想要更改显示属性的值，该怎么办？我试过setPropertyValue（'display'，'none'），但它不起作用。 – avazwij

只是通常的'element.style.display ='none''。 –

document.getElementByClass("youclass")[i].style.property = style

注意getElementByClass()会返回一个包含该类的元素的数组，因此您需要给出要更改的元素的索引。

来源

2016-09-23 16:58:43 Kiogara

JQuery的选项：

$(".myClass").css("display")

console.log($(".myClass").css("display"));

.myClass { 
 
    width : 40px; 
 
    height: 40px; 
 
    display:block; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class = "myClass"> Hello</div>

来源

2016-09-23 17:06:04

如何读取由CSS类设置的DIV的属性值？

回答

相关问题