我是 javascript 的新手。 我创建了一个函数，它添加了一个 id="test_div"的 div。调用后，它在 body 中创建 div 并为该元素提供一个 id。之后，我尝试编写样式“element.style.position”，但它不起作用。但是我可以通过“element.style.cssText”在这个元素中写一个样式。我试图通过在创建元素后添加一个带有“window.getElementById()”的变量来解决这个问题，但它也不起作用。 我不明白我做错了什么。希望得到您的帮助。谢谢。 抱歉英语不好。
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="test.js">
</script>
</head>
<body>
<button onclick="add('Clicked ', 0)">Click</button>
</body>
</html>
js文件:
var element_id = "test_div";
var default_timeout = 3;
var element_bg_color = "rgba(0, 0, 0, .5)";
var element_font_color = "#fff";
var element_pointer_events = "none";
var element_position = "fixed";
var element_top = "0";
var element_left = "0";
var element_padding = '.3em .6em';
var element_margin = "0";
var element_border_radius = "0 0 5px 0";
var add = function(string, timeout){
if(typeof(timeout) === 'undefined'){
timeout = default_timeout;
}
var element = document.createElement('div');
element.id = element_id;
element.style.position = "fixed";
element.style.cssText = "top: 0; left: 0; background-color: " + element_bg_color + "; margin: 0; padding: .3em .6em; border-radius: 0 0 5px 0; color: " + element_font_color + "; pointer-events: " + element_pointer_events + ";";
element.innerHTML = string;
if(document.getElementById(element_id) === null){
document.body.appendChild(element);
}else{
document.body.removeChild(element);
document.body.appendChild(element);
}
if(timeout > 0){
timeout *= 1000;
setTimeout(function() {
document.body.removeChild(element);
}, timeout);
}
};
最佳答案
通过设置 cssText，您将覆盖所有其他样式
如以下示例所示，尽管我将 fontSize 设置为 90px，但 span 实际上获得了 cssText 属性中设置的字体大小和字体粗细。
var span = document.querySelector("span");
span.style.fontSize = "90px";
span.style.cssText = "font-size:20px; font-weight:bold;";<span>Some Text</span>所以要么单独设置每个样式属性，要么先设置 cssText
关于JavaScript 不能写在 element.style.position，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29733937/