编程语言
C#编程语言基础
C#面向对象与多线程
C#数据及文件操作
JavaScript基础
JavaScript的数据类型和变量
JavaScript的运算符和表达式
JavaScript的基本流程控制
JavaScript的函数
JavaScript对象编程
JavaScript内置对象和方法
JavaScript的浏览器对象和方法
JavaScript访问HTML DOM对象
JavaScript事件驱动编程
JavaScript与CSS样式表
Ajax与PHP
ECMAScript6的新特性
Vue.js前端开发
PHP的常量与变量
PHP的数据类型与转换
PHP的运算符和优先规则
PHP程序的流程控制语句
PHP的数组操作及函数
PHP的字符串处理与函数
PHP自定义函数
PHP的常用系统函数
PHP的图像处理函数
PHP类编程
PHP的DataTime类
PHP处理XML和JSON
PHP的正则表达式
PHP文件和目录处理
PHP表单处理
PHP处理Cookie和Session
PHP文件上传和下载
PHP加密技术
PHP的Socket编程
PHP国际化编码
MySQL数据库基础
MySQL数据库函数
MySQL数据库账户管理
MySQL数据库基本操作
MySQL数据查询
MySQL存储过程和存储函数
MySQL事务处理和触发器
PHP操作MySQL数据库
数据库抽象层PDO
Smarty模板
ThinkPHP框架
Python语言基础
Python语言结构与控制
Python的函数和模块
Python的复合数据类型
Python面向对象编程
Python的文件操作
Python的异常处理
Python的绘图模块
Python的NumPy模块
Python的SciPy模块
Python的SymPy模块
Python的数据处理
Python操作数据库
Python网络编程
Python图像处理
Python机器学习
TensorFlow深度学习
Tensorflow常用函数
TensorFlow用于卷积网络
生成对抗网络GAN
JavaScript可以动态操作很多文档样式,要使用DOM。使用DOM,可以通过元素的标记名或ID名获取,然后设置该元素的style属性。
JavaScript的样式名通常类似于对应的CSS属性,但当CSS属性是一个以连字符连接的单词时,使用一个大写字母来分开名字内的主要单词和次要单词。见下表:
CSS属性 | CSS属性 |
---|---|
background | background |
background-attachment | backgroundAttachment |
background-color | backgroundColor |
background-image | backgroundImage |
background-repeat | backgroundRepeat |
border | border |
border-color | borderColor |
color | color |
font-family | fontFamily |
font-size | fontSize |
font-weight | fontWeight |
height | height |
left | left |
list-style | listStyle |
list-style-image | listStyleImage |
margin | margin |
margin-bottom | marginBottom |
maigin-left | maiginLeft |
margin-right | marginRight |
margin-top | marginTop |
padding | padding |
padding-bottom | paddingBottom |
padding-left | paddingLeft |
padding-right | paddingRight |
padding-top | paddingTop |
position | position |
float | styleFloat(IE)/cssFloat |
text-align | textAlign |
top | top |
visibility | visibility |
width | width |
1.通过ID设置元素样式:
使用getElementById()和style对象设置元素的样式,是改变样式的一种简单而有效的方法。
示例:form.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN
在上述html文件相同的文件夹内创建一个JavaScript文件,命名为form.js,代码为:
http://www.w3.org/TR/html4/strict.dtd">
<html><head><title>Form Validation</title>
<script type="text/javascript" src="ehandler.js"></script>
<script type="text/javascript" src="form.js"></script>
</head>
<body>
<form name="formexample" id="formexample" action="#">
<div id="citydiv">City:<input id="city" name="city"></div>
<div><input id="submit" type="submit"></div>
</form>
<script type="text/javascript">
var formE1=document.getElementsByTagName("form")[0];
EHandler.add(formE1,"submit",function(eventObj){checkValid(eventObj);});
</script>
</body></html>
function checkValid(eventObj) {
在浏览器载入from.html,在City文本输入框输入单词text,并点击Submit按钮,就能看到标签City变为粗体,并且这个div周围加上了一个边框。示例中,只是添加了一个外部js文件来执行验证并通过CSS提供反馈。
var cityField=document.forms[0]["city"];
if (cityField.value!="Stevens Point") {
var cityDiv=document.getElementById("citydiv");
cityDiv.style.fontWeight="bold";
cityDiv.style.border="1px solid black";
if (eventObj.preventDefault) {
eventObj.preventDefault();
} else {
window.event.returnValue=false;
}
return false;
} else {
return true;
}
}
2.根据类型设置元素样式:
使用getElementsByTagName()方法获取元素并保存在一个变量中,然后使用for循环遍历变量列表,修改元素的属性。示例:
<script type="text/javascript">
var pElements=document.getElementsByTagName("p");
for (var i=0;i<pElements.length;i++) {
pElements[i].style.fontFamily="arial";
}
</script>
3.JavaScript创建和删除CSS类:
为了保持内容、样式和行为分离的开发准则,改变样式更好的方法是创建一个CSS类。需要时,使用JavaScript在元素中添加、删除类和修改类属性。示例:
var tagLineElement=document.getElementById("tagline");
代码中,使用+=操作符,使该类被添加到一个已有的元素已经从属的类,而不是覆盖已被应用类的类。
tagLineElement.className+="errorClass";
从一个元素中删除类需要用到replace()方法和正则表达式。示例:
var tagLineElement=document.getElementById("tagline");
示例中,在正则表达式帮助下,从tagLineElement的className属性中删除了errorClass类的名字。该正则表达式查找一个单词边界(\b),其次是字符串errorClass,然后是另一个单词边界(\b),使用一个空串代替任何找到的匹配。
tagLineElement.className=tagLineElement.className.replace(/\berror\b/,"");
4.使用JavaScript获取元素样式:
应用于给定元素的已有样式可以使用JavaScript获取,但浏览器之间有区别。对于W3C兼容的浏览器,使用getComputedStyle()方法获取样式;对IE浏览器,需要使用currentStyle数组属性。
所获取的样式是最终应用的样式,包括外部样式表以及所有应用于该文档的CSS样式,计算出的综合样式。示例:
var handing=document.getElementById("heading");
if (typeof handing.currentStyle!="undefined") {
var curStyle=handing.currentStyle.color;
} else if (typeof window.getComputedStyle!="undefined") {
var curStyle=document.defaultView.getComputedStyle(handing,null).getPropertyValue
("color");
}
alert(curStyle);
5.使用JavaScript修改样式表:
用户有时候需要修改应用于一个元素或几个元素的整个样式。
首先要检查浏览器是否支持对已有样式的获取:
if (typeof document.styleSheets!="undefined") {
document.styleSheet数组包含应用于文档的样式,按照它们应用的顺序列出。
//浏览器支持的样式表
}
然后需要克服IE浏览器和W3C兼容浏览器之间的差别,IE浏览器使用rules数组获取给定样式表所应用的规则,而W3C兼容浏览器使用cssRules数组获取该规则。示例:
if (typeof document.styleSheets!="undefined") {
一般是通过遍历样式表查找一个特定的选择器:
var stylerules;
if (typeof document.styleSheets[0].rules!="undefined") {
stylerules=document.styleSheets[0].rules;
} else {
stylerules=document.styleSheets[0].cssRules;
}
}
for (var i=0; i<stylerules.length;i++) {
if (stylerules[i].selectorTest.toLowerCase()!=="h1") {
stylerules[i].style.fontFamily="courier";
}
}