JS-DOMイベント
8077 ワード
JS DOM設定要素属性
idをboxとするこの要素の文字色を設定し、属性がマイナス記号接続の複合形式の場合
アルパカに変換する必要があります
innerHTMLラベル間のテキストとhtmlコンテンツの取得と設定
classNameクラスを再設定すると、元のクラスが置き換えられます
要素にclassプロパティ値が複数ある場合は、すべて取得されます.
プロパティの設定と取得
JSイベント:
マウスイベント
onloadページロード
onclickマウスクリック
onmouseoverマウスの挿入
onmouseoutマウスを離す
onmousemoveマウスをターゲット内に移動
onfocusフォーカス取得
onblurフォーカスを失う
onchange内容変更時
イベントトリガ関数では、thisはDOM要素への参照です.
idをboxとするこの要素の文字色を設定し、属性がマイナス記号接続の複合形式の場合
アルパカに変換する必要があります
var box=document.getElementById("box");
box.style.color='#f00';
box.style.fontWeight="bold";
var lis=document.getElementById("list").getElementsByTagName("li");
// li
for(var i=0,len=lis.length;i){
lis[i].style.color='#00f';
if(i==0){
lis[i].style.backgroundColor="#ccc";
}else if(i==1){
lis[i].style.backgroundColor="#666";
}else if(i==2){
lis[i].style.backgroundColor="#999";
}else{
lis[i].style.backgroundColor="#333";
}
} innerHTMLラベル間のテキストとhtmlコンテンツの取得と設定
classNameクラスを再設定すると、元のクラスが置き換えられます
要素にclassプロパティ値が複数ある場合は、すべて取得されます.
var lis=document.getElementById("list").getElementsByTagName("li");
for(var i=0,len=lis.length;i){
console.log(lis[i].innerHTML);
lis[i].innerHTML+=' ';
lis[1].className="current";
}
console.log(document.getElementById("box").className); プロパティの設定と取得
var p=document.getElementById("text");
var user=document.getElementById("user"); // null
console.log(p.getAttribute("class")); //p.className
console.log(user.getAttribute("validate"));
// p data-color
p.setAttribute("data-color","red");
// input isRead
user.setAttribute("isRead","false");
// p align
p.removeAttribute("align");JSイベント:
マウスイベント
onloadページロード
onclickマウスクリック
onmouseoverマウスの挿入
onmouseoutマウスを離す
onmousemoveマウスをターゲット内に移動
onfocusフォーカス取得
onblurフォーカスを失う
onchange内容変更時
イベントトリガ関数では、thisはDOM要素への参照です.
<span style="color: #0000ff;">function</span><span style="color: #000000;"> mouseoverFn(btn,bgColor){
</span><span style="color: #008000;">//</span><span style="color: #008000;"> ， </span>
btn.style.background=<span style="color: #000000;">bgColor;
}
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> mouseoutFn(btn,bgColor){
btn.style.background</span>=<span style="color: #000000;">bgColor;
}</span></pre>
</div>
<p>DOM 0 </p>
<p> DOM </p>
<p> . = </p>
<p> ， ， ， ：ele. = ， </p>
<div class="cnblogs_code">
<pre><!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>demo</title>
<style><span style="color: #000000;">
.lock{width:140px;height:30px;line</span>-<span style="color: #000000;">height: 30px;background:#00f;
color:#fff;font</span>-size:14px;text-align:center;border-<span style="color: #000000;">radius:5px;
cursor:pointer;margin</span>-<span style="color: #000000;">top:30px;}
.unlock{width:140px;height:30px;line</span>-height: 30px;background:#666<span style="color: #000000;">;
color:#ccc;font</span>-size:14px;text-align:center;border-<span style="color: #000000;">radius:5px;
cursor:pointer;margin</span>-<span style="color: #000000;">top:30px;}
</span></style>
</head>
<body>
<div class="lock" id="btn"> </div>
<script>
<span style="color: #008000;">//</span><span style="color: #008000;"> </span>
<span style="color: #0000ff;">var</span> btn=document.getElementById("btn"<span style="color: #000000;">);
</span><span style="color: #0000ff;">function</span><span style="color: #000000;"> clickBtn(){
alert(</span>" "<span style="color: #000000;">);
}
</span><span style="color: #008000;">//</span><span style="color: #008000;"> clickBtn </span>
btn.onclick=<span style="color: #000000;">clickBtn;
</span><span style="color: #008000;">//</span><span style="color: #008000;"> ,this DOM </span>
btn.onclick=<span style="color: #0000ff;">function</span><span style="color: #000000;">(){
</span><span style="color: #008000;">//</span><span style="color: #008000;"> ， ， ， ， </span>
<span style="color: #0000ff;">if</span>(<span style="color: #0000ff;">this</span>.className=="lock"<span style="color: #000000;">){
</span><span style="color: #0000ff;">this</span>.className="unlock"<span style="color: #000000;">;
</span><span style="color: #0000ff;">this</span>.innerHTML=" "<span style="color: #000000;">;
}</span><span style="color: #0000ff;">else</span><span style="color: #000000;">{
</span><span style="color: #0000ff;">this</span>.className="lock"<span style="color: #000000;">;
</span><span style="color: #0000ff;">this</span>.innerHTML=" "<span style="color: #000000;">;
}
}
</span>