php开发之js修改页面css样式-php教程-PHP中文網

首頁

後端開發

php教程

php开发之js修改页面css样式

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 23, 2016 pm 01:35 PM

在我以前的印象里，页面的字体属性，背景，等样式在页面加载后基本上都是固定的了，但是今天看到可以通过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的交互上哦，下面给大家演示下运行及效果哦

iOS的demo地址：demo

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越炒作：評估當今PHP的角色Apr 12, 2025 am 12:17 AM

PHP在現代編程中仍然是一個強大且廣泛使用的工具，尤其在web開發領域。 1)PHP易用且與數據庫集成無縫，是許多開發者的首選。 2)它支持動態內容生成和麵向對象編程，適合快速創建和維護網站。 3)PHP的性能可以通過緩存和優化數據庫查詢來提升，其廣泛的社區和豐富生態系統使其在當今技術棧中仍具重要地位。

PHP中的弱參考是什麼？什麼時候有用？Apr 12, 2025 am 12:13 AM

在PHP中，弱引用是通過WeakReference類實現的，不會阻止垃圾回收器回收對象。弱引用適用於緩存系統和事件監聽器等場景，需注意其不能保證對象存活，且垃圾回收可能延遲。

解釋PHP中的__ Invoke Magic方法。Apr 12, 2025 am 12:07 AM

\_\_invoke方法允許對象像函數一樣被調用。 1.定義\_\_invoke方法使對象可被調用。 2.使用$obj(...)語法時，PHP會執行\_\_invoke方法。 3.適用於日誌記錄和計算器等場景，提高代碼靈活性和可讀性。

解釋PHP 8.1中的纖維以進行並發。Apr 12, 2025 am 12:05 AM

Fibers在PHP8.1中引入，提升了並發處理能力。 1)Fibers是一種輕量級的並發模型，類似於協程。 2)它們允許開發者手動控制任務的執行流，適合處理I/O密集型任務。 3)使用Fibers可以編寫更高效、響應性更強的代碼。

PHP社區：資源，支持和發展Apr 12, 2025 am 12:04 AM

PHP社區提供了豐富的資源和支持，幫助開發者成長。 1)資源包括官方文檔、教程、博客和開源項目如Laravel和Symfony。 2)支持可以通過StackOverflow、Reddit和Slack頻道獲得。 3)開發動態可以通過關注RFC了解。 4)融入社區可以通過積極參與、貢獻代碼和學習分享來實現。