1. 用js操作属性
用 document.getElementById(‘对应的id名称’); 这种方法获取 指定的ID 的标签,可以进行其他 操作,
还有document.getElementByClassName(‘对应的class名称’); 通过类名来获取标签
像这样的一些操作,都需要在页面加载完成之后去进行,所以就用到了
这个页面加载完成之后,执行的一个匿名函数
window.onload=function(){ document.getElementById(‘对应的id名称’); }
可以对一些属性进行操作,如下如所示:
图片.png
js操作 类名getElementsByClassName
图片.png<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js的操作属性</title>
<script type="text/javascript">
window.onload=function(){
var oDiv1=document.getElementById('div1');
oDiv1.title='这是一个div';
oDiv1.style.color='red';
var oDiv2=document.getElementById('div2');
oDiv2.style.background="gold";
oDiv2.style.fontSize="30px";
var oA=document.getElementById('link');
oA.href="http://www.tencent.com";
oA.title="跳转到腾讯";
var Div3 = document.getElementsByClassName('div');
Div3[0].style.background='cyan';
Div3[1].style.background='red';
var Div=document.getElementsByTagName('div'); // 通过 标签名 来查找
var List=document.getElementById('ul2'); //指定 某个标签
var listcon=List.getElementsByTagName('li'); //通过 上面指定的标签 ,去获取里面 li标签
alert(listcon.length); // 获取长度
}
</script>
</head>
<body>
<div id="div1">这是div1</div>
<div id="div2">这是div2</div>
<a href="#" id="link">腾讯</a>
<div class="div">这是div3</div>
<div class="div">这是div4</div>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>3</li>
<li>4</li>
</ul>
<ul id="ul2">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</body>
</html>
网友评论