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

热AI工具

热工具

热门话题

gmail邮箱登陆入口在哪里

7318

Java教程

1625

CakePHP 教程

1349

Laravel 教程

1261

PHP教程

1209

显示更多

Related knowledge

11个最佳PHP URL缩短脚本（免费和高级） Mar 03, 2025 am 10:49 AM

长URL（通常用关键字和跟踪参数都混乱）可以阻止访问者。 URL缩短脚本提供了解决方案，创建了简洁的链接，非常适合社交媒体和其他平台。这些脚本对于单个网站很有价值

Instagram API简介 Mar 02, 2025 am 09:32 AM

在Facebook在2012年通过Facebook备受瞩目的收购之后，Instagram采用了两套API供第三方使用。这些是Instagram Graph API和Instagram Basic Display API。作为开发人员建立一个需要信息的应用程序

在Laravel中使用Flash会话数据 Mar 12, 2025 pm 05:08 PM

Laravel使用其直观的闪存方法简化了处理临时会话数据。这非常适合在您的应用程序中显示简短的消息，警报或通知。默认情况下，数据仅针对后续请求： $请求 -

构建具有Laravel后端的React应用程序：第2部分，React Mar 04, 2025 am 09:33 AM

这是有关用Laravel后端构建React应用程序的系列的第二个也是最后一部分。在该系列的第一部分中，我们使用Laravel为基本的产品上市应用程序创建了一个RESTFUL API。在本教程中，我们将成为开发人员

简化的HTTP响应在Laravel测试中模拟了 Mar 12, 2025 pm 05:09 PM

Laravel 提供简洁的 HTTP 响应模拟语法，简化了 HTTP 交互测试。这种方法显着减少了代码冗余，同时使您的测试模拟更直观。基本实现提供了多种响应类型快捷方式： use Illuminate\Support\Facades\Http; Http::fake([ 'google.com' => 'Hello World', 'github.com' => ['foo' => 'bar'], 'forge.laravel.com' =>