JS 可以改 CSS 样式. 在很多情况下, 都需要对网页上元素的样式进行动态的修改; 而 JavaScript 可以动态的修改样式. 下面本篇文章就来给大家介绍几种 JavaScript 中修改 CSS 样式的方法, 希望对大家有所帮助.
JavaScript 修改 CSS 样式的几种方法:
1, 使用 obj.className 来修改样式表的类名.
2, 使用 obj.style.cssTest 来修改嵌入式的 CSS.
3, 使用更改外联的 CSS 文件, 从而改变元素的 CSS
示例:
下面是一段 html 代码和 CSS 代码用来解释上面方法的区别的.
- CSS
- .style1 {
- margin: 10px auto;
- background - color: #9999FF;
- display: block;
- color: White;
- border: 1px solid white;
- padding: 10px 25px;
- font - size: 18px;
- }
- .style1: hover {
- background - color: #66B3FF;
- cursor: pointer;
- }
- .style2 {
- margin: 10px auto;
- background - color: gray;
- display: block;
- color: black;
- border: 1px solid white;
- padding: 10px25px;
- font - size: 18px;
- }
- .style2: hover {
- background - color: black;
- color: White;
- cursor: pointer
- }
HTML 代码:
- <div>
- <input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
- <div id="tool">
- <input type="button" value="[obj.style.className] 更改样式" onclick="changeBackgroundColor()" />
- <input type="button" value="[obj.style.cssText] 更改样式" onclick="changeFontSize()" />
- <input type="button" value="[obj.className] 更改样式" onclick="addRadius()" />
- <input type="button" value="更改外联 css 样式" onclick="recover()" /></div>
- </div>
方法一, 使用 obj.style.cssTest 来修改嵌入式的 CSS
- function changeStyle2() {
- var obj = document.getElementById("btnB");
- obj.style.cssText = " display:block;color:White;
- }
方法二, 使用 bj.className 来修改样式表的类名
使用代码来修改 btB 引用样式的类名, 如下段代码:
- function changeStyle3() {
- var obj = document.getElementById("btnB");
- //obj.className = "style2";
- obj.setAttribute("class", "style2");
- }
通过更改 btB 的 CSS 的类名的方式来更改样式, 更改样式类名有两种方式. 1,obj.className = "style2"; 2, obj.setAttribute("class", "style2"); 都是一样的效果.
用这种方式来修改 CSS 比上面的效果要好很多.
方法三, 使用更改外联的 CSS 文件, 从而改变元素的 CSS
通过更改外联的 CSS 文件引用从而来更改 btB 的样式, 操作很简单. 代码如下:
首先得引用外联的 CSS 文件, 代码如下:
- <link href="css1.css" rel="stylesheet" type="text/css" id="css"/>
- function changeStyle4() {
- var obj = document.getElementById("css");
- obj.setAttribute("href","css2.css");
- }
更多前端开发 https://www.html.cn/ 知识, 请查阅 HTML 中文网 !!
来源: http://www.css88.com/qa/javascript/14303.html