因此，我在 javascript 中创建了一个元素，并为其分配了某些样式属性，并向该元素添加了一个类。在我的样式表中，我对所述类有一些规则 - 但是我在 CSS 文件中的转换规则没有应用于该元素。新创建的元素没有得到这些规则有什么原因吗？在 safari 中，我看到它们被粉红色划掉了。 这是我的代码:
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Tester</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script type="text/javascript" src="script.js"></script>
</head>
<body>
</body>
</html>
脚本.js:
window.onload = function() {
var elm = document.createElement("div");
elm.classList.add("testcls");
elm.style.width = "100%";
elm.style.height = "20em";
elm.style.backgroundColor = "red";
document.body.appendChild(elm);
setTimeout(function() {
elm.style.height = "10em";
},1000);
};
样式.css:
.testcls {
background-color: green;
-webkit-transition: all 0.5 ease-in-out;
-moz-transition: all 0.5 ease-in-out;
-ms-transition: all 0.5 ease-in-out;
-o-transition: all 0.5 ease-in-out;
transition: all 0.5 ease-in-out;
}
最佳答案
在您的 CSS 规则中指定过渡持续时间的单位:
.testcls {
background-color: green;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
关于javascript - 在 javascript 中创建元素时，CSS 转换规则固有地被覆盖？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/20298758/