php开发之js修改页面css样式
来源:互联网 发布:多益网络 m.duoyi.com 编辑:程序博客网 时间:2024/05/22 04:46
在我以前的印象里,页面的字体属性,背景,等样式在页面加载后基本上都是固定的了,但是今天看到可以通过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
0 0
- php开发之js修改页面css样式
- js修改css样式
- js修改css样式
- js修改css样式
- js 修改页面样式
- 在项目开发中,jsp页面不会少了,如何公用页面(添加页面和修改页面)和公用样式代码(css,js)?
- 开发日志:js修改iframe内的css样式
- wordpress样式CSS php修改实例整理
- js修改css样式表解析(转)
- js修改css样式表解析(转)
- js修改css样式表解析(转)
- JS修改css样式style浅谈
- JS如何访问修改css样式表
- web开发之页面css样式表、以及(jquery+css)
- php去除html,css,js样式
- 关于iframe子页面修改其父页面CSS样式
- 开发时常用到的页面Css样式
- 修改页面滚动条样式CSS代码!(待修改兼容性)
- 【english】好的开始就是成功的一半
- Intent的主要属性的使用说明
- CentOS快速安装mysql
- Matlab的SUBPLOT的图像大小调整
- NVIDIA正式宣布CUDA 6.0:支持统一寻址!
- php开发之js修改页面css样式
- 算法-找出其他出现偶数次的数组中出现1次,2次,3次的数
- 软考-----进程,线程,管程,程序
- my.cnf解决中文乱码
- 【ThinkingInJava】17、匿名类的工厂方法
- 出现错误ActivityManager: Warning: Activity not started, its current task has been
- play 的action映射页面
- 工程师的自我修养
- leetcode_树_相关内容