JavaScript无法在element.style.position中编写

Question

I'm a complete newbie in javascript. 我是javascript的新手。 I make a function, that adds a div with id="test_div". 我做一个函数，添加一个id为“ test_div”的div。 After call it creates div in body and give an id to the element. 调用后，它将在主体中创建div并为该元素提供一个ID。 After that i try to write style "element.style.position" and it doesn't work. 之后，我尝试编写样式“ element.style.position”，但它不起作用。 But i can write a style in this element through "element.style.cssText". 但是我可以通过“ element.style.cssText”在此元素中编写样式。 I tried to solve this by adding a variable with "window.getElementById()" after create the element, but it also doesn't work. 我尝试通过在创建元素后添加带有“ window.getElementById（）”的变量来解决此问题，但这也无法正常工作。 I don't understand what i am doing wrong. 我不明白我在做什么错。 Hope for your help. 希望对您有所帮助。 Thank you. 谢谢。 Sorry for bad English. 对不起，英语不好。

html file: 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 file: 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);
    }
};

Answer 1

By setting the cssText you are overwriting all the other styles 通过设置cssText，您将覆盖所有其他样式

As the below example shows even though I set the fontSize to 90px , the span actually gets the font-size and font-weight set in the cssText property. 如下面的示例所示，即使我将fontSize设置为90px ，跨度实际上也会获得cssText属性中设置的font-size和font-weight。

 var span = document.querySelector("span"); span.style.fontSize = "90px"; span.style.cssText = "font-size:20px; font-weight:bold;";

 <span>Some Text</span>

So either set each style property separately or set cssText first 因此，要么分别设置每个样式属性，要么先设置cssText

Answer 2

Those two lines: 这两行：

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 + ";";

Switch them. 切换它们。

Explanation: 说明：

element.style.position = "fixed";

This line adds position: fixed; 这行添加position: fixed; to the style attribute of element . 到element的style属性。 So your element looks like 所以你的元素看起来像

<div id="test_div" style="position: fixed;"></div>

And then: 接着：

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 + ";";

This lines replaces the entire style attribute with whatever comes after the = sign. 这行代码将整个style属性替换为=符号后的内容。
So your element looks like this: 因此，您的元素如下所示：

<div id="test_div" style="/* lots of things here, but NOT "position: fixed;" anymore */"></div>

And here's a fiddle because why not?: http://jsfiddle.net/kxqgr913/ 这是一个小提琴，因为为什么不呢？： http : //jsfiddle.net/kxqgr913/

Answer 3

Here is a short snippet jsfiddle.net/nffubk14/ to explain how to add a div, append a text node to it and give it a style, hope this helps you understand what's going on. 这是一个简短的代码段jsfiddle.net/nffubk14/用于解释如何添加div，向其添加文本节点并为其赋予样式，希望这有助于您了解正在发生的事情。 For more reading on this subject learn about DOM (Document Object Model) 有关此主题的更多阅读，请了解DOM （文档对象模型）

JavaScript无法在element.style.position中编写

问题描述

3 个解决方案

解决方案1
1 已采纳 2015-04-19 18:30:15

解决方案2
0 2015-04-19 18:29:06

解决方案3
0 2015-04-19 18:34:10

JavaScript无法在element.style.position中编写

问题描述

3 个解决方案

解决方案1 1 已采纳 2015-04-19 18:30:15

解决方案2 0 2015-04-19 18:29:06

解决方案3 0 2015-04-19 18:34:10

解决方案1
1 已采纳 2015-04-19 18:30:15

解决方案2
0 2015-04-19 18:29:06

解决方案3
0 2015-04-19 18:34:10