JavaScript修改css样式style动态改变元素样式


Posted in Javascript onDecember 16, 2013

一、局部改变样式
分为改变直接样式,改变className和改变cssText三种。需要注意的是:
注意大小写:
javascript对大小写十分敏感,className不能够把“N”写成“n”,cssText也不能够把“T”写成“t”,否则无法实现效果。
调用方法:
如果改变className,则事先在样式表中申明类,但调用时不要再跟style,像document.getElementById('obj').style.className=”…”的写法是错误的!只能写成:document.getElementById('obj').className=”…”
改变cssText
但是如果用cssText的话,必须加上style,正确的写法是:document.getElementById('obj').style.cssText=”…”

改变直接样式我就不必说了,大家记得要写到具体样式即可,如

document.getElementById('obj').style.backgroundColor=”#003366″

二、全局改变样式
通常情况下,我们可以通过改变外链样式的的href的值实现网页样式的实时切换,也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id,如

<link rel = "stylesheet" type="text/css" id="css" href="firefox.css" />
调用时很简单,如

<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>
对于新人往往不知道CSS具体样式在javascript怎么写,而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat,在FIREFOX中写成cssFloat,这就需要大家的积累了。在google中搜索“ccvita javascript”,也许会对你的疑惑有所帮助。

基础知识

通常在网页中样式表的调用方法有三种。
第一种:链入外部样式表文件 (Linking to a Style Sheet)
你可以先建立外部样式表文件(.css),然后使用HTML的link对象。示例如下:

<head> 
<title>文档标题</title> 
<link rel=stylesheet href="http://www.ccvita.com/demo.css" type="text/css"> 
</link></head>

而在XML中,你应该如下例所示在声明区中加入:
< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.com/dhtmlet.css" ?>

第二种:定义内部样式块对象 (Embedding a Style Block)
你可以在你的HTML文档的和标记之间插入一个

块对象。 定义方式请参阅样式表语法。示例如下:

<html> 
<head> 
<title>文档标题</title> 
<style type="text/css"> 
<!-- 
body {font: 10pt "Arial"} 
h1 {font: 15pt/17pt "Arial"; font-weight: bold; color: maroon} 
h2 {font: 13pt/15pt "Arial"; font-weight: bold; color: blue} 
p {font: 10pt/12pt "Arial"; color: black} 
--> 
</style> 
</head> 
<body> 
</body></html>

请注意,这里将style对象的type属性设置为”text/css”,是允许不支持这类型的浏览器忽略样式表单。

第三种:内联定义 (Inline Styles)
内联定义即是在对象的标记内使用对象的style属性定义适用其的样式表属性。示例如下:

<p style="margin-left: 0.5in; margin-right:0.5in">这一行被增加了左右的外补丁</p><p> </p>
Javascript 相关文章推荐
jQuery Lightbox 图片展示插件使用说明
Apr 25 Javascript
使用Jquery搭建最佳用户体验的登录页面之记住密码自动登录功能(含后台代码)
Jul 10 Javascript
js判断选择的时间是否大于今天的代码
Aug 20 Javascript
node.js中的http.response.end方法使用说明
Dec 14 Javascript
详谈javascript中DOM的基本属性
Feb 26 Javascript
jQuery插件FusionCharts绘制2D双折线图效果示例【附demo源码】
Apr 14 jQuery
JS库之ParticlesJS使用简介
Sep 12 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
Dec 06 Javascript
JS实现滚动条触底加载更多
Sep 19 Javascript
使用localStorage替代cookie做本地存储
Sep 25 Javascript
js实现select下拉框选择
Jan 11 Javascript
js实现贪吃蛇游戏(简易版)
Sep 29 Javascript
使用apply方法实现javascript中的对象继承
Dec 16 #Javascript
javaScript如何生成xmlhttp
Dec 16 #Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 #Javascript
JS实现模仿微博发布效果实例代码
Dec 16 #Javascript
JSON无限折叠菜单编写实例
Dec 16 #Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
You might like
用PHP发电子邮件
2006/10/09 PHP
第九节--绑定
2006/11/16 PHP
php基础知识:类与对象(4) 范围解析操作符(::)
2006/12/13 PHP
谈谈新手如何学习PHP
2006/12/14 PHP
Apache2中实现多网站域名绑定的实现方法
2011/06/01 PHP
php后台多用户权限组思路与实现程序代码分享
2012/02/13 PHP
php tp验证表单与自动填充函数代码
2012/02/22 PHP
Yii2.0 RESTful API 基础配置教程详解
2018/12/26 PHP
通过AJAX的JS、JQuery两种方式解析XML示例介绍
2013/09/23 Javascript
前台js调用后台方法示例
2013/12/02 Javascript
Node.js与PHP、Python的字符处理性能对比
2014/07/06 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
创建你的第一个AngularJS应用的方法
2015/06/16 Javascript
实用又漂亮的BootstrapValidator表单验证插件
2016/05/30 Javascript
js改变css样式的三种方法推荐
2016/06/28 Javascript
推荐三款不错的图片压缩上传插件(webuploader、localResizeIMG4、LUploader)
2017/04/21 Javascript
Three.js利用dat.GUI如何简化试验流程详解
2017/09/26 Javascript
详解Vue 动态组件与全局事件绑定总结
2018/11/11 Javascript
[02:46]解说DC:感谢430陪伴我们的DOTA2国际邀请赛岁月
2016/06/29 DOTA
python计算方程式根的方法
2015/05/07 Python
Windows上使用virtualenv搭建Python+Flask开发环境
2016/06/07 Python
python实现批量监控网站
2016/09/09 Python
在python的类中动态添加属性与生成对象
2016/09/17 Python
深入浅出分析Python装饰器用法
2017/07/28 Python
python实现SOM算法
2018/02/23 Python
Python应用实现处理excel数据过程解析
2020/06/19 Python
python爬虫请求头设置代码
2020/07/28 Python
HTML5在a标签内放置块级元素示例代码
2013/08/23 HTML / CSS
日本著名的平价时尚女性购物网站:Fifth
2016/08/24 全球购物
Expedia泰国:预订机票、酒店和旅游包(航班+酒店)
2016/09/27 全球购物
升职自荐信范文
2013/10/05 职场文书
中学生学习生活的自我评价
2013/10/26 职场文书
运动会稿件50字
2014/02/17 职场文书
护理学院专科毕业生求职信
2014/06/28 职场文书
活动总结报告怎么写
2014/07/03 职场文书
python单元测试之pytest的使用
2021/06/07 Python