本文目录一览：
怎么用js的addClassName给class=””加一个样式
如下示例：
!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “
html xmlns=”
head
meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ /
titleDemo/title
/head
style type=”text/css”
a{text-decoration: none;}
.class-name{border: 1px solid #CCCCCC;background: #FFA54F;-webkit-border-radius: 5px;-moz-border-radius: 5px;khtml-border-radius: 5px;border-radius: 5px;padding: 5px 10px;width: 100px;text-align: center;}
/style
body
div id=”main”
a href=”javascript:;” onclick=”add_class()”添加Class/a
/div
script language=”javascript” type=”text/javascript”
function add_class(){
document.getElementById(‘main’).className = ‘class-name’;
}
/script
/body
/html
测试效果如下：
添加class前
添加class后
与jQuery的addClass同一效果的。
js如何添加CSS样式中的class添加属性
js不可修改css中的属性，只能为指定的class的元素添加内联样式（style）
原生JS：
var dom = document.getElementsByClassName(‘dtd’);
for(var i=0,len=dom.length; ilen; i++){
dom[i].style.color = ‘red’;
}Jquery
$(‘.dtd’).css({color:’red’});
用JavaScript给所有相同的class添加CSS样式。
!doctype html
html lang=”en”
head
meta charset=”UTF-8″
meta name=”Generator” content=”EditPlus®”
meta name=”Author” content=””
meta name=”Keywords” content=””
meta name=”Description” content=””
titleDocument/title
/head
body
div id=”container” style=”width: 480px; height: 220px;border:1px solid #e3e3e3;” onclick=”renderLink();”
a href=”#” class=”mya”Test1/a
a href=”#”Test2/a
a href=”#” class=”mya”Test3/a
a href=”#” class=”mya”Test4/a
a href=”#” class=”mya”Test5/a
a href=”#”Test6/a
/div
/body
/html
script type=”text/javascript”
function renderLink(){
var alist = document.getElementsByClassName(“mya”);
if(alist){
for(var idx = 0; idx alist.length; idx ++){
var mya = alist[idx];
mya.style.color = “red”;
mya.style.fontSize = “36px”;
}
}
}
/script
先用document.getElementsByClassName(“className”)取得所有class为className的元素，再循环添加样式即可，如果用JQuery会简单很多；也可以自己用JS封装一个函数实现JQuery一样的效果
原创文章，作者：YSOPY，如若转载，请注明出处：https://www.506064.com/n/330472.html
微信扫一扫 
支付宝扫一扫 