本文目錄一覽：
怎麼用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/zh-hant/n/330472.html
微信掃一掃 
支付寶掃一掃 