Cannot add CSS style to an element at runtime

Question

I have following code to change the style of an element, once I enter the page the alert window will be shown with "myP" message; whoever, the style wont get added to the element. Also, let me know if you have jQuery based solution for it.

<!DOCTYPE html>
<html>
 <body>
    <script type="text/javascript">
         alert("myP");
         document.getElementById("myP").style.fontWeight = "bold";
    </script>

    ...
    <a id="myP" href="www.example.com">Example</a>
    ...

    </body>

</html>

Kirill Slatin · Accepted Answer · 2015-03-18 03:44:58Z

2

As requested by OP jQuery-based solution for waiting for the DOM to load would be

$(document).ready(function(){
    alert("myP");
    $("#myP").css("font-weight", "bold")
});

answered Mar 18, 2015 at 3:44

Kirill Slatin

6,1823 gold badges21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jack Over a year ago

Thanks for your answer but Mritunjay posted his answer before you so I need to accept his answer.

Mritunjay · Accepted Answer · 2015-03-18 03:41:01Z

1

That is because the document is not loaded at the time your JS code is being executed.

Wrap the javascript code to window.onload function like bellow

 window.onload = function(){
     alert("myP");
     document.getElementById("myP").style.fontWeight = "bold";
 }

Note:- Make a habit of looking at console.

answered Mar 18, 2015 at 3:41

Mritunjay

25.9k7 gold badges57 silver badges71 bronze badges

Comments

Leo Farmer · Accepted Answer · 2015-03-18 03:40:46Z

1

Your script will run before the element is loaded. You need to wrap it in a function and call it when the document loads.

answered Mar 18, 2015 at 3:40

Leo Farmer

7,9606 gold badges35 silver badges48 bronze badges

Comments

Sudhir Bastakoti · Accepted Answer · 2015-03-18 03:40:50Z

1

your element would not be found by the script as it would not have been loaded when you call getElementById on it, so move your script code before closing body tag, as:

<!DOCTYPE html>
<html>
 <body>      

    ...
    <a id="myP" href="www.example.com">Example</a>
    ...
    <script type="text/javascript">
         alert("myP");
         document.getElementById("myP").style.fontWeight = "bold";
    </script>
    </body>

</html>

Demo :: jsFiddle

answered Mar 18, 2015 at 3:40

Sudhir Bastakoti

100k15 gold badges163 silver badges169 bronze badges

Collectives™ on Stack Overflow

Cannot add CSS style to an element at runtime

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related