JS修改css样式style浅谈


Posted in Javascript onMay 06, 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="https://3water.com/demo.css" type="text/css"> 
</link> 
</head>

而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="https://3water.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的siblings效果的js代码
Aug 09 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
Dec 10 Javascript
JS实现超简洁网页title标题跑动闪烁提示效果代码
Oct 23 Javascript
浅析JavaScript Array和string的转换(推荐)
May 20 Javascript
Javascript 制作图形验证码实例详解
Dec 22 Javascript
微信小程序实战之仿android fragment可滑动底部导航栏(4)
Apr 16 Javascript
js实现复制功能(多种方法集合)
Jan 06 Javascript
layui框架table 数据表格的方法级渲染详解
Aug 19 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
js实现固定区域内的不重叠随机圆
Oct 24 Javascript
用JavaScript修改CSS属性的代码
May 06 #Javascript
Jquery带搜索框的下拉菜单
May 06 #Javascript
Extjs中通过Tree加载右侧TabPanel具体实现
May 05 #Javascript
jquery高效反选具体实现
May 05 #Javascript
Jquery为a标签的href赋值实现代码
May 03 #Javascript
5秒后跳转效果(setInterval/SetTimeOut)
May 03 #Javascript
如何用JavaScript动态呼叫函数(两种方式)
May 03 #Javascript
You might like
PHP:风雨欲来 路在何方?
2006/10/09 PHP
PHP查询网站的PR值
2013/10/30 PHP
PHP实现的MongoDB数据库操作类分享
2014/05/12 PHP
php禁止浏览器使用缓存页面的方法
2014/11/07 PHP
php实现在限定区域里自动调整字体大小的类实例
2015/04/02 PHP
php读取csc文件并输出
2015/05/21 PHP
php实现base64图片上传方式实例代码
2017/02/22 PHP
PHP递归实现汉诺塔问题的方法示例
2017/11/25 PHP
各情景下元素宽高的获取实现代码
2011/09/13 Javascript
jQuery实现列表自动循环滚动鼠标悬停时停止滚动
2013/09/06 Javascript
jquery 获取dom固定元素 添加样式的简单实例
2014/02/04 Javascript
jQuery判断对象是否存在的方法
2015/02/05 Javascript
在JavaScript中操作时间之getYear()方法的使用教程
2015/06/11 Javascript
详解JavaScript异步编程中jQuery的promise对象的作用
2016/05/03 Javascript
第一次接触神奇的Bootstrap菜单和导航
2016/08/01 Javascript
Google 地图事件实例讲解
2016/08/06 Javascript
jQuery实现字体颜色渐变效果的方法
2017/03/29 jQuery
Angular 2.x学习教程之结构指令详解
2017/05/25 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
nodejs判断文件、文件夹是否存在及删除的方法
2017/11/10 NodeJs
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
angular将html代码输出为内容的实例
2018/09/30 Javascript
查看TensorFlow checkpoint文件中的变量名和对应值方法
2018/06/14 Python
Python实现ElGamal加密算法的示例代码
2020/06/19 Python
python与c语言的语法有哪些不一样的
2020/09/13 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
美国领先的精品家居照明和装饰产品在线零售商:LightsOnline.com
2018/01/23 全球购物
Electric官网:美国高级眼镜和配件品牌
2020/06/04 全球购物
英语教师岗位职责
2014/03/16 职场文书
2014年度党员自我评议
2014/09/13 职场文书
2014国庆节幼儿园亲子活动方案
2014/09/16 职场文书
党的群众路线教育实践活动对照检查材料(个人)
2014/09/24 职场文书
安全教育日主题班会
2015/08/13 职场文书
浅谈自定义校验注解ConstraintValidator
2021/06/30 Java/Android
springboot+zookeeper实现分布式锁
2022/03/21 Java/Android
解决Mysql中的innoDB幻读问题
2022/04/29 MySQL