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 相关文章推荐
在Z-Blog中运行代码[html][/html](纯JS版)
Mar 25 Javascript
jquery 插件实现图片延迟加载效果代码
Feb 06 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
Jul 20 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
jQuery事件用法实例汇总
Aug 29 Javascript
Javascript获取CSS伪元素属性的实现代码
Sep 28 Javascript
jQuery对于显示和隐藏等常用状态的判断方法
Dec 13 Javascript
jQuery中last()方法用法实例
Jan 06 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
基于JavaScript实现树形下拉框
Aug 10 Javascript
jqgrid实现简单的单行编辑功能
Sep 30 Javascript
vue仿淘宝订单状态的tab切换效果
Jun 23 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
php4的session功能评述(一)
2006/10/09 PHP
PHP文件读写操作之文件读取方法详解
2011/01/13 PHP
PHP中防止SQL注入方法详解
2014/12/25 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
使用PHP访问RabbitMQ消息队列的方法示例
2018/06/06 PHP
Laravel框架Eloquent ORM简介、模型建立及查询数据操作详解
2019/12/04 PHP
使用原生javascript创建通用表单验证——更锋利的使用dom对象
2011/09/13 Javascript
jquery实现简单的拖拽效果实例兼容所有主流浏览器
2013/06/21 Javascript
jquery移动端TAB触屏切换实现效果
2020/12/22 Javascript
JS使用eval解析JSON的注意事项分析
2015/11/14 Javascript
Bootstrap学习笔记之css组件(3)
2016/06/07 Javascript
手动初始化Angular的模块与控制器
2016/12/26 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
使用Vue-Router 2实现路由功能实例详解
2017/11/14 Javascript
Vuex实现数据增加和删除功能
2019/11/11 Javascript
[05:26]2014DOTA2西雅图国际邀请赛 iG战队巡礼
2014/07/07 DOTA
[02:57]DOTA2亚洲邀请赛 SECRET战队出场宣传片
2015/02/07 DOTA
Python中的__SLOTS__属性使用示例
2015/02/18 Python
Python实现文件信息进行合并实例代码
2018/01/17 Python
python实现列表中由数值查到索引的方法
2018/06/27 Python
python 计算概率密度、累计分布、逆函数的例子
2020/02/25 Python
Python使用monkey.patch_all()解决协程阻塞问题
2020/04/15 Python
如何从csv文件构建Tensorflow的数据集
2020/09/21 Python
python中最小二乘法详细讲解
2021/02/19 Python
CSS3 实现发光边框特效
2020/11/11 HTML / CSS
html5文字阴影效果text-shadow使用示例
2013/07/25 HTML / CSS
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
波比布朗英国官网:Bobbi Brown英国
2017/11/13 全球购物
团结演讲稿范文
2014/05/23 职场文书
财务部副经理岗位职责范本
2014/06/17 职场文书
考试作弊被抓检讨书
2014/10/02 职场文书
大雁塔英文导游词
2015/02/10 职场文书
2016春节家属慰问信
2015/03/25 职场文书
任命通知范文
2015/04/21 职场文书
浅谈:电影《孔子》观后感(范文)
2019/10/14 职场文书
服务器nginx权限被拒绝解决案例
2022/09/23 Servers