CODEWITHSUNDEEP
javascripthtmlcss
Konstantin
Konstantin

Reputation: 3

JavaScript can't write in element.style.position

I'm a complete newbie in javascript. I make a function, that adds a div with id="test_div". After call it creates div in body and give an id to the element. After that i try to write style "element.style.position" and it doesn't work. But i can write a style in this element through "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. I don't understand what i am doing wrong. Hope for your help. Thank you. Sorry for bad English.

html file:

<!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:

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);
    }
};

Upvotes: 0

Views: 1043

Answers (3)

odedta
odedta

Reputation: 2478

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. For more reading on this subject learn about DOM (Document Object Model)

Upvotes: 0

Patrick Evans
Patrick Evans

Reputation: 42736

By setting the cssText you are overwriting all the other styles

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.

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

Upvotes: 1

Siguza
Siguza

Reputation: 23830

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; to the style attribute of element. 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.
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/

Upvotes: 0

Related Questions