gpt4 book ai didi

javascript - CSS 代码是否初始化 DOM 对象的 .style 属性?

转载 作者:搜寻专家 更新时间:2023-10-31 23:21:51 24 4
gpt4 key购买 nike

背景:

我创建了一个简单的 DOM 事件示例:参见 jsfiddle here .

<div id="squirrel" onmouseover="toggleFloat(this)">
<p>Click me!</p>
</div>

<script>
function toggleFloat(ele){
var current = ele.style.cssFloat;
console.log("cssFloat: "+current);
if(current==="left")
ele.style.cssFloat="right";
else
ele.style.cssFloat="left";
}
</script>

随附的 CSS:

#squirrel{
float:left;
}

注意到奇怪的行为:在 DOM 中,#squirrel 的 cssFloat 属性的初始值为“”。 (打开开发人员控制台可以看到这一点。或者注意 #squirrel 在第二个事件触发之前不会移动。)。

我的问题是:CSS 代码应该没有初始化 DOM 对象的 cssFloat 属性吗? ...或与此相关的任何样式属性?

最佳答案

元素的 style 属性表示其内联样式(使用 style 属性定义)。

这些不会被您的 css 文件中定义的 css 规则修改。浏览器根据这些规则和内联样式计算最终样式。

可以使用 MDN: Window.getComputedStyle() 检索最终计算出的样式

您通常应该避免使用内联样式属性。通常你应该尝试使用 class 来操纵某个元素的外观。此外,使用 style 属性动态更改内联样式只应在确实没有办法解决的情况下使用,例如如果您需要动态移动元素。您还可以阅读 Inline tags vs. inline css properties 的答案了解更多信息。

关于javascript - CSS 代码是否初始化 DOM 对象的 .style 属性?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39234483/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com