JavaScript modifies CSS styles styles dynamically change element styles
- 2020-03-30 00:55:04
- OfStack
One, local change style
There are three ways to change the direct style, change the className and change the cssText. Note:
Note case:
Javascript is case sensitive, and className cannot write "N" as "N", and cssText cannot write "T" as "T", otherwise it will not work.
Call method:
If you change the className, declare the class in the style sheet first, but don't call it with style, like document.getelementbyid ('obj').style.classname = "..." Is wrong! Document.getelementbyid ('obj').classname = "..."
Change cssText
But if you use cssText, you must add style. The correct way to write it is document.getelementbyid ('obj').style.csstext = "..."
I don't have to change the direct style, just remember to write it to a specific style, like
Two, global change style
In general, we can change the href value of the outer link style to change the page style in real time. At this point we first need to give the target that needs to be changed an id, such as
< Link rel =" stylesheet" type="text/ CSS "id=" CSS" href="firefox.css" />
It's very simple to call, like
< Span on the click = "javascript: the document. The getElementById (' CSS '). Href = 'ie. CSS'" > Click I change style < / span>
New users often don't know how CSS styles are written in javascript, and sometimes the requirements vary from browser to browser. If float is styleFloat in IE and cssFloat in FIREFOX, you need to accumulate. A Google search for "ccvita javascript" may help your confusion.
Basic knowledge of
There are usually three ways to invoke a style sheet in a web page.
Type 1: Linking to a Style Sheet
You can create external style sheet files (.css) and then use the HTML link object. Here's an example:
In XML, you should add the following example to the declaration area:
Type 2: defining an internal Style Block
You can insert one between the and tags of your HTML document
Block object. See style sheet notation for how to define. Here's an example:
Note that setting the type attribute of the style object to "text/ CSS" allows browsers that do not support this type to ignore the style form.
Type 3: Inline definitions
An inline definition USES the style attribute of an object within its tag to define the stylesheet attribute that applies to it. Here's an example:
There are three ways to change the direct style, change the className and change the cssText. Note:
Note case:
Javascript is case sensitive, and className cannot write "N" as "N", and cssText cannot write "T" as "T", otherwise it will not work.
Call method:
If you change the className, declare the class in the style sheet first, but don't call it with style, like document.getelementbyid ('obj').style.classname = "..." Is wrong! Document.getelementbyid ('obj').classname = "..."
Change cssText
But if you use cssText, you must add style. The correct way to write it is document.getelementbyid ('obj').style.csstext = "..."
I don't have to change the direct style, just remember to write it to a specific style, like
document.getElementById('obj').style.backgroundColor= " #003366 "
Two, global change style
In general, we can change the href value of the outer link style to change the page style in real time. At this point we first need to give the target that needs to be changed an id, such as
< Link rel =" stylesheet" type="text/ CSS "id=" CSS" href="firefox.css" />
It's very simple to call, like
< Span on the click = "javascript: the document. The getElementById (' CSS '). Href = 'ie. CSS'" > Click I change style < / span>
New users often don't know how CSS styles are written in javascript, and sometimes the requirements vary from browser to browser. If float is styleFloat in IE and cssFloat in FIREFOX, you need to accumulate. A Google search for "ccvita javascript" may help your confusion.
Basic knowledge of
There are usually three ways to invoke a style sheet in a web page.
Type 1: Linking to a Style Sheet
You can create external style sheet files (.css) and then use the HTML link object. Here's an example:
<head>
<title> Document title </title>
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
In XML, you should add the following example to the declaration area:
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>
Type 2: defining an internal Style Block
You can insert one between the and tags of your HTML document
Block object. See style sheet notation for how to define. Here's an example:
<html>
<head>
<title> Document title </title>
<style type="text/css">
<!--
body {font: 10pt "Arial"}
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon}
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue}
p {font: 10pt/12pt "Arial"; color: black}
-->
</style>
</head>
<body>
</body></html>
Note that setting the type attribute of the style object to "text/ CSS" allows browsers that do not support this type to ignore the style form.
Type 3: Inline definitions
An inline definition USES the style attribute of an object within its tag to define the stylesheet attribute that applies to it. Here's an example:
<p style="margin-left: 0.5in; margin-right:0.5in"> This line has been added with left and right outer patches </p><p> </p>