使用するのは簡単jQueryのサードパーティ製プラグイン、
要件:
ピンクのボックスから背景色が青になり作るためにボタンをクリックして、400ピクセルの幅となり
1.ネイティブJS
<!DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> <タイトル>ドキュメント</ TITLE> <スタイル> #box { 幅:200pxの。 高さ:200pxの。 背景色:ピンク; } </スタイル> </ head> <body> <ボタンID = "BTN">点击显示</ボタン> <DIV ID = "ボックス"> </ div> < btn.onclick =関数(){ VARボックス=のdocument.getElementById( "ボックス"); box.style.backgroundColorは=「スカイブルー」。
box.style.width =「400ピクセル」。
} } </ SCRIPT> </ body> </ HTML>
レンダリング
2.jQuery
注意:jQueryライブラリを導入
<!DOCTYPE HTML> <HTML LANG = "EN"> <HEAD> <メタ文字コード= "UTF-8"> <メタ名= "ビューポート"コンテンツ= "幅=装置幅、初期の規模= 1.0"> <メタHTTP-当量= "X-UA-互換性のある"コンテンツ= "IE =エッジ"> <タイトル>ドキュメント</ TITLE> <スタイル> #box { 幅:200pxの。 高さ:200pxの。 背景色:ピンク; } </スタイル> <スクリプトSRC = "./ JS / jquery.min.js "> </ SCRIPT> <SCRIPT> $(関数(){ $(" #1 BTN")。 }) }) </ SCRIPT> </ head> <body> <ボタンID = "BTN">点击显示</ボタン> <DIV ID = "ボックス"> </ div> </ body> </ HTML>
レンダリング