この記事では、主に js の操作要素の属性と操作要素のスタイルについて詳しく説明します。皆さんのお役に立てれば幸いです。
js は要素の属性を操作します
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
</style></head><body>
<!--
js中的属性
1: 可读可写
获取原有的内容
设置新的内容
2: 可读不可写
获取原有的值时
length
2: 属性操作
1: 合法属性的操作
直接点操作(可读可写)
class比较特殊,需要操作calssName
不能直接操作不合法属性,如果直接操作,他将变成js自定义属性
直接在等号后面赋值
获取元素之间的区别
1: 获取集合(动态变化的)
集合不是一个固定的东西
更改值之后,就不在指向原来的元素
length同时会发生改变
用一次获取一次
动态方法(class 标签名 选择器 name)
2: 获取单个(静态的)
改变的都是同一个元素,不是集合
获取和修改都是对一个对象进行操作
静态方法(id)
2: 不合法属性的操作(指标签里面的自定义属性)
1: 获取属性 getAttribute
2: 设置 / 修改属性和值 setAttribute
3: 移除属性 removeAttribute
3: 中括号的使用 []
1: 可以直接获取合法属性,在中括号中需要引号
2: 获取集合中的第几个元素
3: 代替大多数的点,只要把点后面的属性值变成字符串就可以了
获取已知属性,但是属性没有办法直接点或者属性是变量 就用[]
-->
<p id="box" class="wrap" title="小花" dachui="大锤" style="height:100px;width:200px;">女生的特点: 喜欢逛吃逛吃逛吃,呜呜呜呜</p>
<p class="wrap"></p>
<p class="wrap"></p>
<p class="wrap"></p>
<p class="wrap"></p>
<script>
var oBox = document.getElementById("box"); var aBox = document.getElementsByClassName("wrap");/* oBox.innerHTML = "总结: 火车";
alert( oBox.innerHTML );
alert( oBox.innerHTML = "总结: 火车" );
aBox.length = 4;
var aa = aBox.length;
alert(aa);//5
*/
/* oBox.id = "mojing";
var x = oBox.id;
//alert(oBox.id);
oBox.className = "aa";
var y = oBox.className;
alert(y);
var z = oBox.title;
//alert(z);
var zz = oBox.dachui;//这种写法属于js的自定义属性
//alert(zz);*/
/*
alert(oBox.id);
oBox.id = "mojing";
alert(oBox.id);
alert(oBox.innerHTML);
alert(aBox.length);//打印5
aBox[0].className = "bb";
aBox[0].innerHTML = "魔镜魔镜,谁是世界上最爱笑的女生!";
alert(aBox.length);//打印4
*/
/*
//获取标签中的自定义属性 getAttribute
//var x = oBox.getAttribute("dachui");
//alert(x);
alert( oBox.getAttribute("id") );
//设置自定义属性和值 setAttribute
oBox.setAttribute("xiaotiantian" , "小甜甜");
oBox.setAttribute("dachui" , "xiaotiantian");
//移除自定义属性 removeAttribute
oBox.removeAttribute("dachui");
oBox.removeAttribute("xiaotiantian")*//*
//oBox.id = "wrap";
oBox["id"] = "wrap2";//不推荐使用这种方式获取
aBox[0].className = "aa";*/
var dachui = 3;
oBox.dachui = 2;//js的自定义属性
//alert(dachui);
var x = "width";
alert(oBox.style[x]); </script></body></html>ログイン後にコピー
js は要素のスタイルを操作します
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
#box{ width:200px; }
#css1.aa{ width: 100px; height:100px; background: pink; }
</style></head><body>
<!--
js操作元素样式
1: 样式 外部 内部 行内时
不采用后台操作,纯js不能修改外部样式,只能修改内部和行内样式
2: 修改方式
1: 拼接内部样式(很麻烦,考虑优先级,必须知道id的值是什么,不常用)
2: 行内样式
对象.属性.属性 = "数值";
oBox.style.cssFloat = "";//火狐
oBox.style.styleFloat = "";//ie
获取样式:只能获取行内样式,不能获取内部和外部的样式
复合属性: 去掉横杆,然后采取驼峰命名法
3: class方式修改样式
-->
<p id="box" style="width:100px;height: 100px;background: pink;float:left;">hello wold!</p>
<p id="css1" style="margin-left:50px;"></p>
<script>
var oBox = document.getElementById("box"); var oCss = document.getElementById("css1"); //alert(oBox);/* var oCss = document.getElementById("css");
oBox.style.cssText = "width: 100px;height: 100px;border:1px solid red;";*/
oBox.style.width = "300px";
oBox.style.float = "right";
oCss.className = "aa"; //oBox.innerHTML = oBox.innerHTML + "你好,是你的益达";
oBox.innerHTML += "你好,是你的益达";
oCss.style.marginLeft = "100px"; </script></body></html>ログイン後にコピー
display(none, block)
<!DOCTYPE html><html lang="en"><head>
<meta charset="UTF-8">
<meta name="Keywords" content="关键字,关键词">
<meta name="Description" content="描述和简介">
<title>Title</title>
<style type="text/css">
*{margin:0;padding:0;}
body,ul,li,ol,dl,dd,p,h1,h2,h3,h4,h5,h6{ margin:0;}
a{text-decoration:none;}
img{border:none;}
ol,ul{list-style:none;}
#box{ position: relative; }
#box img{ position: absolute; top: 0; left: 0; display: none; }
#box #img1{ display: block; }
</style></head><body>
<p id="box">
<img id="img1" src="images/1.jpg" alt="">
<img id="img2" src="images/2.jpg" alt="">
</p>
<script>
var oImg1 = document.getElementById("img1"),
oImg2 = document.getElementById("img2");
oImg1.onclick = function (){
this.style.display = "none";
oImg2.style.display = "block";
};
oImg2.onclick = function (){
this.style.display = "none";
oImg1.style.display = "block";
}; </script></body></html>ログイン後にコピー
関連推奨事項:
要素の取得、要素のラップ、要素属性の挿入のための jquery の使用法の詳細な説明
jscriptを共有する vbscriptでXML要素の属性を操作するメソッド
jscriptとvbscriptでXML要素の属性を操作するメソッド
以上がjs操作要素の属性と操作要素スタイルの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
