本文目录一览:
- 1、js怎么动态控制div的class?
- 2、js 如何控制class?
- 3、javascript如何控制input的checked属性
- 4、怎么通过js 改变display
- 5、JS 如何控制DIV中内容
js怎么动态控制div的class?
先获取到li标签集合,再遍历该集合把每个className加上去:
script type="text/javascript"
var li = document.getElementsByTagName('li');
for(var i = 0;ili.length;i++){
li[i].className = i+1;
}
/script
js 如何控制class?
script type="text/javascript"
window.onload = function() {
var abcs = document.getElementsByClassName("abc");
for(var i = 0; i abcs.length; i++) {
abcs[i].style.width = "50%";
}
};
/script
注意:上面的代码不支持 IE 6/7,因为 IE 6/7 不支持 getElementsByClassName。
下面的代码支持 IE 6/7,使用 getElementsByTagName 查找 div,再查找 abc
script type="text/javascript"
window.onload = function() {
var divs = document.getElementsByTagName("div");
for(var i = 0; i divs.length; i++) {
var classes = divs[i].className.split(" ");
for(var a = 0; a classes.length; a++) {
if(classes[a] === "abc") {
divs[i].style.width = "50%";
break;
}
}
}
};
/script
javascript如何控制input的checked属性
input type="radio" name="a" value="1" /
input type="radio" name="a" value="2" /
input type="radio" name="a" value="3" /
script type="text/javascript"
var radiovar = document.getElementsByName("a");
for(var i=0;iradiovar.length;i++)
{
if(radiovar[i].value==2)//这个2即为你所要找的input的值
radiovar[i].checked = "checked";
}
//或者用jquery
//$("input[type='radio'][value=2]").attr("checked","checked" );
/script
怎么通过js 改变display
1、打开hbuilder软件,新建一个空白的html文件,输入基本的html结构,这里设置一个button按钮用来显示隐藏div,并且给按钮一个id,命名为show。同样也给div一个id,命名为hide:
2、在下方编写js代码,首先给获取button的dom元素,并给其一个click事件,然后获取div的dom,修改disply的属性为block,即让隐藏的div显示出来:
3、按下crtl+S保存,在浏览器里观察效果:
4、点击显示隐藏的按钮,隐藏的div就出现了。以上就是用js控制display属性的过程:
JS 如何控制DIV中内容
思路:先获取div对象,然后用innerHTML属性设置内容。当div用id属性标识时,可以直接用document.getElementById()获取;当div是用其他属性(如name,class)标识,就需要使用document.getElementsByTagName()获取对象,然后循环判断属性进行筛选。
下面实例演示根据div的class设置div的内容:
1、HTML结构
div class="test"/div
input type="text" id="test"/input type='button' value='发送' onclick="fun()"/
2、javascript代码
function fun(){
var str = document.getElementById("test").value;
var divs = document.getElementsByTagName("div");
for(i=0;idivs.length;i++){
if(divs[i].className == "test"){
divs[i].innerHTML += "br" +str;
}
}
}
3、效果演示