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 相关文章推荐
用 JSON 处理缓存
Apr 27 Javascript
javascript 操作文件 实现方法小结
Jul 02 Javascript
浅谈JavaScript中Date(日期对象),Math对象
Feb 05 Javascript
元素绑定click点击事件方法
Jun 08 Javascript
举例讲解JavaScript substring()的使用方法
Nov 09 Javascript
js定义类的几种方法(推荐)
Jun 08 Javascript
AngularJS国际化详解及示例代码
Aug 18 Javascript
在Vue组件化中利用axios处理ajax请求的使用方法
Aug 25 Javascript
vue+swiper实现组件化开发的实例代码
Oct 26 Javascript
JS实现的文字间歇循环滚动效果完整示例
Feb 13 Javascript
Vue中$refs的用法详解
Jun 24 Javascript
基于JavaScript获取url参数2种方法
Apr 17 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中时间轴开发(刚刚、5分钟前、昨天10:23等)
2011/10/03 PHP
ThinkPHP模版引擎之变量输出详解
2014/12/05 PHP
PHP微信支付结果通知与回调策略分析
2019/01/10 PHP
PHP7 标准库修改
2021/03/09 PHP
JQuery里选择超链接的实现代码
2011/05/22 Javascript
JavaScript实现iframe自动高度调整和不同主域名跨域
2016/02/27 Javascript
JavaScript数值千分位格式化的两种简单实现方法
2016/08/01 Javascript
浅谈javascript alert和confirm的美化
2016/12/15 Javascript
脚本div实现拖放功能(两种)
2017/02/13 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
nodejs使用express获取get和post传值及session验证的方法
2017/11/09 NodeJs
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
2017/11/22 Javascript
jQuery+CSS实现的table表格行列转置功能示例
2018/01/08 jQuery
如何获取vue单文件自身源码路径
2019/05/06 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
python利用beautifulSoup实现爬虫
2014/09/29 Python
Python中join函数简单代码示例
2018/01/09 Python
Python简单计算给定某一年的某一天是星期几示例
2018/06/27 Python
python匿名函数用法实例分析
2019/08/03 Python
keras CNN卷积核可视化,热度图教程
2020/06/22 Python
运行Python编写的程序方法实例
2020/10/21 Python
python给list排序的简单方法
2020/12/10 Python
美国东北部户外服装和设备零售商:Eastern Mountain Sports
2016/10/05 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
jQuery treeview树形结构应用
2021/03/24 jQuery
工业自动化专业毕业生推荐信
2013/11/18 职场文书
自我鉴定书面格式
2014/01/13 职场文书
《最大的“书”》教学反思
2014/02/14 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
材料员岗位职责
2015/02/10 职场文书
志愿者个人总结
2015/03/03 职场文书
幼儿园教师师德表现自我评价
2015/03/05 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
关于开学的感想
2015/08/10 职场文书
安全生产学习心得体会
2016/01/18 职场文书
详解Go语言中Get/Post请求测试
2022/06/01 Golang