js給class賦值_JS能否獲取動態class的寬度並賦值給高度目的是實現響應式正方形附HTML和CSS

1. js怎麼修改class 值

選取的對象。例如document.getElementById("test1").className="class1";

test1是元素的ID，class1是樣式名。

2. js 給li 的class賦值問題，請教高手

看你的代碼應該是引入jquery了，你是想把沒選中的單選按鈕外層的li元素加class嗎？
可以這樣：
$(function(){
$('input[name="id"]').click(function(){
$(this).parent().removeClass('aaa'); //被點擊的radio外面的li元素去掉class
$(this).parent().siblings().addClass('aaa'); //被點擊的radio外面的li元素同級其他的li元素加上class
})
})

3. 如何用javascript為元素添加class

現代抄瀏覽器寫法：
document.getElementById('test').classList.add('myClass');
兼容寫法：
document.getElementById('test').className += ' myClass';

4. js每隔一定時間給div的class或者id賦值。

//看錶演啦！
<body>
<div id="stage"></div>
<script>
onload=function()
{
var n=0;
var div=document.getElementById('stage');
setInterval(function(){
if(++n>10)n=1;
div.className='class_'+n;//n就是你要的1-10，但class命名標準是英文字母開頭，所以給你加了個前綴"class_"
},1000);
}
</script>
</body>

5. JS的循環賦class值

js:

window.onload=function(){
varlis=document.getElementsByTagName("li");
for(vari=0;i<lis.length;i++){
lis[i].className=String(i).length>1?i:"0"+i;
}
}

jquery:

jQuery(function($){
$("li").each(function(i,domEle){
$(this).addClass(String(i).length>1?i:"0"+i);
});
});

6. JS能否獲取動態class的寬度並賦值給高度，目的是實現響應式正方形，附HTML和CSS

你這樣的寫的話不先賦值給thumbnail統一的高度的話恐怕頁面會顯得參差不齊而不是你想的4塊模塊平均撐開頁面，還有你是把圖片寫進div你當背景，那就不需要js來處理這個問題。

<style>
#thumbnailbox{position:absolute;left:0;top:0;width:100%;height:100%;}
#thumbnailboxa{width:50%;height:50%;display:block;position:absolute;left:0;top:0;}
#thumbnailboxa.bg1{background:url(../images/1.jpg)50%50%no-repeat;}
#thumbnailboxa.bg2{left:50%;background:url(../images/2.jpg)50%50%no-repeat;}
#thumbnailboxa.bg3{top:50%;background:url(../images/3.jpg)50%50%no-repeat;}
#thumbnailboxa.bg4{left:50%;top:50%;background:url(../images/4.jpg)50%50%no-repeat;}
</style>
<divid="thumbnailbox">
<ahref="post_1.html"title="縮略圖1"class="thumbnailbg1"></a>
<ahref="post_1.html"title="縮略圖1"class="thumbnailbg2"></a>
<ahref="post_1.html"title="縮略圖1"class="thumbnailbg3"></a>
<ahref="post_1.html"title="縮略圖1"class="thumbnailbg4"></a>
</div>

7. 使用js如何給標簽的class值批量賦值

添加多個class 其實可以先從添加一個class然後對其進行封裝

好的我廢話就不多說了下面給出一份演示

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Title</title>
<style>
.asdasd{
width:100px;
height:100px;
background-color:#cccccc;
}
.hello{
background-color:#00AEEF;
}
</style>
</head>
<body>
<divclass="asdasd"id="demo">

</div>
<script>
//清楚空格
functiontrim(str,t){
if(typeoft=="undefined"){
t="lr";
}
switch(t){
case"l":{
returnstr.replace(/(^s*)/g,"");
}
case"r":{
returnstr.replace(/(s*$)/g,"");
}
case"lr":{
returnstr.replace(/(^s*)|(s*$)/g,"");
}
}

}
//增加Class
functionaddClass(ele,cls){
if(!ele.getAttribute)return;
varallClass=[];
cls=trim(cls);
if(ele.getAttribute("class")==null){}else{
allClass=ele.getAttribute("class").split("");
}
if(!inArr(allClass,cls)){
allClass.push(cls);
ele.setAttribute("class",allClass.join(""));
}
}
//循環
functioneach(arr,f){
if(!arr.length)returnconsole.log("error:arrayisnotlength");
for(vari=0;i<arr.length;i++){
f.call(arr[i],i,arr[i]);
}
}
//是否在數組裡面其實可以通過indexof判斷但是indexof是匹配了數據類型的
functioninArr(arr,v){
if(!arr.length)returnfalse;
for(vari=0;i<arr.length;i++){
if(v==arr[i]){returntrue;}
}
returnfalse;
}
//增加多個Class
functionaddClassArr(ele,arr){
each(arr,function(){
addClass(ele,this);
})
}
addClassArr(document.getElementById("demo"),["a1","hello","world"])
</script>
</body>
</html>

可以看到如果沒有執行addClassArr這個函數顯示的效果的這樣的

8. 怎麼用javascript修改class裡面的值

varimgs=document.getElementsByClassName('img');
for(vari=0;i<imgs.length;i++){
imgs[i].style.width='150px';
}

9. 如何用js判斷某值然後賦予新CLASS

var aObj=document.getElementsByTagName("a");
for(var i=0;i<aObj.length;i++)
{
if(aObj[i].title="求購")
{
document.getElementById("qzqg").className="新的class";

}

}

問題是，第一，你的所有em的id都是qzqg，第二，沒看出代碼里這兩者有什麼聯系

10. html+js實現給class賦值。不是單個賦值而是賦值多個。

<!>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>TEST</title>
<style>
.list{
width:250px;
height:100px;
border:1pxsolidblack;
}

.main{
margin:0pxauto;
}

.list{
float:left;
}

input{
margin:50px50px;
}
.yellow{
background-color:yellow;
}
</style>
<scriptsrc="min.js"></script>
</head>
<body>
<divid="group1">
<divclass="list"></div>
<divclass="list">
<inputtype="text"class="lt"/>
</div>
</div>
<pre></pre>
<divid="group2">
<divclass="list"id="group2"></div>
<divclass="list"id="group2">
<inputtype="text"class="lt"/>
</div>
</div>
<script>
$(function(){
$('#group1').click(function(){
if(!$(this).children().hasClass('yellow')){
$(this).children().addClass('yellow')
}else{
$(this).children().removeClass('yellow')
}
})
$('#group2').click(function(){
if(!$(this).children().hasClass('yellow')){
$(this).children().addClass('yellow')
}else{
$(this).children().removeClass('yellow')
}
})


//$('.list').click(function(){
//if(!$(this).hasClass('selected')){
//$(this).css('background-color','yellow');
//$(this).addClass('selected');
//varvalue=$('.mt').val();
//$(this).children('input').val(value);
//}
//else{
//$(this).css('background-color','white');
//$(this).children('input').val('');
//$(this).removeClass('selected');
//}
//});
});
</script>
</body>
</html>

導航:首頁 > 編程語言 > js給class賦值

js給class賦值

與js給class賦值相關的資料

友情鏈接