Geek Answers Handbook

How to change CSS rules for an external stylesheet

Possible duplicate:
How to change / delete CSS class definitions at runtime?

I have an HTML page that uses an external css file. I want to change the css rules of an external file using javascript at runtime.

myHtml.html

<html> <head> <link rel="stylesheet" href="myCSS.css" type="text/css"> <script type="text/ecmascript" src="myJS.js" /> </head> <body> <p> change css style color for this element using javascript </p> </body> </html>

myCSS.css

 .p{ color:blue}

myJS.js

 var ss = document.styleSheets[0] var firstRule = ss.rules[0] // null

I want to perform an operation:

 firstRule.style.color = "red" ;
+8
javascript html css
source share
2 answers

You can do the following

 var div = document.getElementById("newDiv"); div.style.position = "absolute"; div.style.top = "200px"; div.style.left = "200px";

Similarly, you can edit / add additional css properties. See if this helps to change CSS rules: Change CSS rules

+3
source share

You can override external css properties using internal css. This can also be achieved in three different ways:

1) declare your css properties on the page itself, for example, according to your code, including style tags and post properties between

 < html> < head> < link rel="stylesheet" href="myCSS.css" type="text/css"> < script type="text/ecmascript" src="myJS.js" /> <style type="text/css"> ........................ ......................... </style> < /head> < p > change css style color for this element using javascript < /p> < /html>

2) Using inline css

 < p style="font-color:red;"> change css style color for this element using javascript < /p>

3) Using javascript: this is just another way, or you can say an indirect way to implement the implementation of the internal css implementation. See The First Answer Asked by @Misam

+1
source share

More articles:


All Articles