我可以使用Javascript将CSS样式属性打印到控制台吗?
还有一个基本问题,我在网上找不到答案。我可以使用javascript轻松更改元素的CSS属性我可以使用Javascript将CSS样式属性打印到控制台吗?,javascript,html,css,Javascript,Html,Css,还有一个基本问题,我在网上找不到答案。我可以使用javascript轻松更改元素的CSS属性 document.getElementById("ExampleID").style.height="30px"; 但是,每当我尝试将属性打印到控制台时 console.log(document.getElementById("ExampleID").style.height); 它打印一个空行而不是属性。如何打印所需元素的样式属性值?非常感谢您可以使用 let elem=document.ge
document.getElementById("ExampleID").style.height="30px";
但是,每当我尝试将属性打印到控制台时
console.log(document.getElementById("ExampleID").style.height);
它打印一个空行而不是属性。如何打印所需元素的样式属性值?非常感谢您可以使用
let elem=document.getElementById('test');
设ht=window.getComputedStyle(elem,null).getPropertyValue(“高度”);
console.log(ht)
.test{
高度:300px;
宽度:300px;
边框:1px纯红;
}
Test
确保您正在使用从您的选择返回的实际元素进行测试(参见下面的示例)。否则您的代码就可以了
const elem=document.getElementById('elemId');
elem.style.height='30px';
控制台.日志(元素样式.高度)代码>
在这种情况下,您需要检查HTML部分
如果您是从javascript进行设置,那么您的代码工作正常
如果CSS中定义的样式使用
getComputedStyle()方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算之后,报告元素的所有CSS属性的值。单个CSS属性值可以通过对象提供的API访问,也可以通过简单的CSS属性名称索引来访问
以下是工作片段:
var divEle=document.getElementById(“ExampleID”);
log(“Before:height::”+divEle.style.height);
log(“Before:color::”+divEle.style.color);
var heightCss=window.getComputedStyle(divEle,null).getPropertyValue(“高度”);
var colorCss=window.getComputedStyle(divEle,null).getPropertyValue(“颜色”);
log(“Before:height from css::”+heightCss)
log(“Before:color from css::”+colorCss)
函数changeCss(){
divEle.style.height=“30px”;
divEle.style.color=“蓝色”;
log(“之后:高度::”+divEle.style.height);
log(“After:color::”+divEle.style.color);
}
.divClass{
高度:40px;
颜色:红色;
宽度:40px;
边框:2件纯黑;
}
测试
document.getElementById(“ExampleID”).style.height=“30px”;
log(document.getElementById('ExampleID').clientHeight);
log(document.getElementById('ExampleID').offsetHeight)代码>
clientHeight包括填充。
offsetHeight包括填充、滚动条和边框。
对我来说效果很好,还有什么可能导致问题吗?ExampleID
元素在尝试控制台记录时是否应用了内联样式?CSS中定义的样式不能通过元素访问。样式
。不可以,它们是使用CSS修改的。这也适用于其他属性吗?例如边距值、填充等。
标记不使用也不需要结束斜杠,而且从来没有。是的,您可以使用console.log(document.getElementById(“myDiv”).style.marginLeft)、marginRight和marginTopetc@Rob,是的,我忘了,我会修好的