Question

还有另一个基本问题，我似乎找不到在线答案。我可以使用javascript

轻松更改元素的CSS属性。

 document.getElementById("ExampleID").style.height="30px";

但是，每当我尝试使用

将属性打印到控制台时，

console.log(document.getElementById("ExampleID").style.height);

它将打印空白行而不是属性。如何打印所需元素的样式属性值？非常感谢

Answer 1

您可以使用getComputedStyle

let elem = document.getElementById('test');
let ht = window.getComputedStyle(elem, null).getPropertyValue("height");
console.log(ht)

.test {
  height: 300px;
  width: 300px;
  border: 1px solid red;
}

<div class="test" id="test">Test</div>

Answer 2

确保您正在测试的实际元素将从您的选择中返回（请参见下面的示例）。否则，您的代码就可以了。

const elem = document.getElementById('elemId');
elem.style.height = '30px';

console.log(elem.style.height);

<div id="elemId"></div>

Answer 3

在这种情况下，您需要检查HTML部分。

如果您使用javascript进行设置，则您的代码可以正常工作。
如果CSS中定义的样式使用window.getComputedStyle()

window.getComputedStyle（）方法在应用活动样式表并解决这些值可能包含的所有基本计算之后，返回一个报告元素的所有CSS属性值的对象。可以通过对象提供的API或通过简单地使用CSS属性名称进行索引来访问各个CSS属性值。

这是工作片段：

var divEle=document.getElementById("ExampleID");
console.log("Before:height::"+divEle.style.height);
console.log("Before:color::"+divEle.style.color);

var  heightCss = window.getComputedStyle(divEle, null).getPropertyValue("height");
var  colorCss = window.getComputedStyle(divEle, null).getPropertyValue("color");

console.log("Before:height from css::"+heightCss)
console.log("Before:color from css::"+colorCss)

function changeCss(){
divEle.style.height="30px";
divEle.style.color="blue";

console.log("After:height::"+divEle.style.height);
console.log("After:color::"+divEle.style.color);
}

.divClass {
  height: 40px;
  color: red;
  width: 40px;
  border: 2px solid black;
}

<div class="divClass" id="ExampleID">test</div><div><input type="button" onClick="changeCss();" value="Change Css"/></div>

Answer 4

document.getElementById("ExampleID").style.height="30px";
console.log(document.getElementById('ExampleID').clientHeight);
console.log(document.getElementById('ExampleID').offsetHeight);

   
<div id="ExampleID">
clientHeight includes padding.<br>
offsetHeight includes padding, scrollBar and borders.
</div>

clientHeight包含填充。
offsetHeight包括填充，scrollBar和边框。

我可以使用Javascript将CSS样式属性打印到控制台吗？

4 个答案: