ホームページ > 記事 > ウェブフロントエンド > 注意すべきJSの8つの基礎知識
注意すべきJSの8つの基礎知識
- php中世界最好的语言オリジナル
- 2018-03-13 13:16:111579ブラウズ
今回は注意すべきJSの8つの基礎知識とは?注意点は何ですか?実際の事例を見てみましょう。
1 JS 内の要素のクラス名を変更します: className を通じて変更できますが、class は使用できません function toRed() { var tobox = document.getElementById('box1');
tobox.className = 'tmpBox';
}
<html lang="en"><head>
<meta charset="UTF-8">
<title>02-函数传参数</title>
<style>
#div1{width: 200px; height: 200px; border: 1px solid #000;} </style>
<script>
function setColor(color) { var oDiv = document.getElementById('div1');
oDiv.style.backgroundColor = color;
} </script></head><body><input type="button" value="变绿" onclick="setColor('green')"><input type="button" value="变黄" onclick="setColor('yellow')"><input type="button" value="变黑" onclick="setColor('black')"><div id="div1"></div></body></html>
oDiv.style[属性名] = value;
//括号里放的是变量
function setStyle(propertyName,value) {
var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
}<html lang="en"><head>
<meta charset="UTF-8">
<title></title>
<style>
#div1{ width: 100px;height: 100px;border: 1px solid #000;background-color: skyblue;
} </style>
<script>
function setStyle(propertyName,value) { var oDiv = document.getElementById('div1');
oDiv.style[propertyName] = value;
} </script></head><body><input type="button" value="变高" onclick="setStyle('height','200px')"><input type="button" value="变宽" onclick="setStyle('width','200px')"><input type="button" value="变红" onclick="setStyle('background','red')"><div id="div1"></div></body></html>
4 の違いstyle と className
Element.style.Attribute = xxx; は、変更されたインターライン (インライン) スタイルであり、その優先度は比較的高くなります。例: oDiv.style.backgroundColor = 'red ';
className: 対応するスタイルを見つけるためにクラス名を指定して渡すことができます; ただし、style を使用してから className を使用してスタイルを指定すると、効果はありません!!!!
注: style を使用して、スタイルを設定するか、className を使用して単独で指定します。スタイルは混合できません。不明なエラーが発生する可能性があります。
5.提取行间事件
window.onload はページが読み込まれた後にのみ実行されます。
動作、スタイル、構造の分離: JS CSS HTML の分離
イベントを抽出する
要素にイベントを追加する
<html lang="en"><head>
<meta charset="UTF-8">
<title>05-提取行间事件</title>
<script>
//window.onload 页面加载完成时才执行
window.onload = function () { var oBtn = document.getElementById('btn1'); //给元素添加事件
oBtn.onclick = function () { //匿名函数
alert('我是打酱油的');
};
} </script></head><body><input id="btn1" type="button" value="按钮"></body></html>6.JSは親要素から子要素を取得します次のコードから入力
<div id="box1">
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br>
<input type="checkbox"> <br></div>を取得し、次のように記述します:
window.onload =function (){ var oDiv = document.getElementById('box1'); //现获取父元素div
var inputs = oDiv.getElementsByTagName('input'); //再通过div获取到里面所有的input}7. innerHTMLは、コンテナラベルのコンテンツを設定するために使用されます。これはテキストである場合もあれば、HTML (タグ)である場合もあります。
<html lang="en"><head>
<meta charset="UTF-8">
<title>08-innerHTML</title>
<style>
.content{ width: 200px; height: 200px; border: 1px solid #000;
} </style>
<script>
window.onload = function () { var oText = document.getElementById('textField'); var oBtn = document.getElementById('button'); var oContent = document.getElementById('div-content');
oBtn.onclick = function () {
oContent.innerHTML = oText.value;//可以往里放文字,标签等
}
} </script></head><body><input type="text" id="textField"><input type="button" value="点击" id="button"><div class="content" id="div-content"></div></body></html>8. 文字列のスプライシング:
var str = '我叫小明'+12+'岁'+168+'2017'; >>> 结果:我叫小明12岁1682017var num = '9+6等于'+(9+6); >>> 结果: 9 + 6 等于 15
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨読書:
HTMLとCSSの背景関連属性HTMLとCSSの2D変換モジュール以上が注意すべきJSの8つの基礎知識の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。