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 相关文章推荐
js 对联广告、漂浮广告封装类(IE,FF,Opera,Safari,Chrome
Nov 26 Javascript
基于JQuery实现异步刷新的代码(转载)
Mar 29 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
Jan 17 Javascript
点击页面其它地方隐藏该div的两种思路
Nov 18 Javascript
JavaScript数组深拷贝和浅拷贝的两种方法
Apr 16 Javascript
常用jQuery选择器总结
Jul 11 Javascript
javascript原型模式用法实例详解
Jun 04 Javascript
jQuery插件HighCharts绘制2D金字塔图效果示例【附demo源码下载】
Mar 09 Javascript
Vue 组件传值几种常用方法【总结】
May 28 Javascript
vue中的自定义分页插件组件的示例
Aug 18 Javascript
Vuejs+vue-router打包+Nginx配置的实例
Sep 20 Javascript
Vue解决echart在element的tab切换时显示不正确问题
Aug 03 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
CentOS下PHP安装Oracle扩展
2015/02/15 PHP
php使用timthumb生成缩略图的方法
2016/01/22 PHP
功能强大的php文件上传类
2016/08/29 PHP
PHP编程实现微信企业向用户付款的方法示例
2017/07/26 PHP
laravel框架如何设置公共头和公共尾
2019/10/22 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
PHP中echo与print区别点整理
2021/03/09 PHP
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
JS实现标签页效果(配合css)
2013/04/03 Javascript
JS定时刷新页面及跳转页面的方法
2013/07/04 Javascript
js+csss实现的一个带复选框的下拉框
2014/09/29 Javascript
JS表的模拟方法
2015/02/05 Javascript
javascript发送短信验证码实现代码
2015/11/12 Javascript
jQuery事件绑定用法详解(附bind和live的区别)
2016/01/19 Javascript
AngularJS国际化详解及示例代码
2016/08/18 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
Angular在一个页面中使用两个ng-app的方法
2017/02/20 Javascript
vue+element 模态框表格形式的可编辑表单实现
2019/06/07 Javascript
微信小程序wx.request的简单封装
2019/11/13 Javascript
详解node和ES6的模块导出与导入
2020/02/19 Javascript
原生js实现表格翻页和跳转
2020/09/29 Javascript
python网络编程之TCP通信实例和socketserver框架使用例子
2014/04/25 Python
python中zip和unzip数据的方法
2015/05/27 Python
PyCharm代码格式调整方法
2018/05/23 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python中GIL的使用详解
2018/10/03 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python爬虫利用selenium实现自动翻页爬取某鱼数据的思路详解
2020/12/22 Python
CSS3中引入多种自定义字体font-face
2020/06/12 HTML / CSS
美国最大的骑马用品零售商:HorseLoverZ
2017/01/12 全球购物
Linux内核产生并发的原因
2012/07/13 面试题
Delphi CS笔试题
2014/01/04 面试题
项目建议书格式
2014/03/12 职场文书
镇创先争优活动总结
2014/08/28 职场文书
起诉书范文
2015/05/20 职场文书
感恩教师主题班会
2015/08/12 职场文书