PHP開発jsがページのcssスタイルを変更する-PHPチュートリアル-php.cn

PHP開発jsがページのcssスタイルを変更する

WBOY

リリース： 2016-06-23 13:35:42

オリジナル

1581 人が閲覧しました

前回の印象では、ページのフォント属性や背景などのスタイルはページが読み込まれた後に固定されることが基本でしたが、今日はページのスタイルが js を通じて変更できることを見て、なるほどと感じました。全員と共有する必要があります。
test.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=GB18030"><title>css ajax </title><script type ="text/javascript" src ="test.js"> </script><link href ="styles.css" type ="text/css" rel ="stylesheet"/></head><body ><table id ="table" ><tr><th id ="tableHead">Product Name</th></tr><tr><td id ="tableFirstLine">AirPlane</td></tr><tr><td id ="tableSecondLine">Big car</td></tr></table><br/><input type ="button" value ="set style 1" onclick ="setStyle1()"/>触发事件改变页面的样式<input type ="button" value ="set style 2" onclick ="setStyle2()"/>触发事件改变页面样式</body></html>

ログイン後にコピー

ページのテキストスタイル、背景、フォントサイズはすべてシステムのデフォルトです。後ほど、比較のために実行結果を示します

test.js

function setStyle1(){  //将表的风格改为style1    //获取html的引用    oTable = document.getElementById("table");    oTableHead = document.getElementById("tableHead");    oTableFirstLine =document.getElementById("tableFirstLine");    otableSecondLine = document.getElementById("tableSecondLine");    //设置风格     oTable.className ="Table1";     oTableHead.className ="TableHead1";     oTableFirstLine.className ="TableContent1";     oTableSecondLine.classNamee ="TableContent1";}function setStyle2(){    //将表格的风格改为style2    //获取html元素的引用    oTable = document.getElementById("table");    oTableHead = document.getElementById("tableHead");    oTableFirstLine =document.getElementById("tableFirstLine");    otableSecondLine = document.getElementById("tableSecondLine");    //设置风格     oTable.className ="Table2";     oTableHead.className ="TableHead2";     oTableFirstLine.className ="TableContent2";     oTableSecondLine.classNamee ="TableContent2";}

ログイン後にコピー

styles.css

/* @CHARSET "GB18030"; */.Table1{ border:DarkGreen 1px solid; background-color:LightGreen; }.TableHead1{ font-family:Verdana,Arial; font-weight:bold; font-size:10pt; }.TableContent1{ font-family:Verdana,Arial; font-size:10pt; }.Table2{ border:DarkBlue 1px solid; background-color:LightBlue; }.TableHead2{ font-family:Verdana,Arial; font-weight:bold; font-size:10pt; }.TableContent2{ font-family:Verdana,Arial; font-size:10pt; }

ログイン後にコピー

実行時の効果は次のとおりです。

さらに、これらの知識ポイントは、UIWebView と js の間の対話で使用できます。以下に操作と効果を示します。