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 相关文章推荐
Javascript和HTML5利用canvas构建Web五子棋游戏实现算法
Jul 17 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
Jul 29 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
Mar 25 Javascript
javascript顺序加载图片的方法
Jul 18 Javascript
Three.js学习之几何形状
Aug 01 Javascript
轻松掌握JavaScript单例模式
Aug 25 Javascript
angularJs关于指令的一些冷门属性详解
Oct 24 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue项目设置scrollTop不起作用(总结)
Dec 21 Javascript
JavaScript实现页面中录音功能的方法
Jun 04 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
Ajax 的初步实现(使用vscode+node.js+express框架)
Jun 18 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性能优化准备篇图解PEAR安装
2011/12/05 PHP
php中in_array函数用法探究
2014/11/25 PHP
PHP使用Face++接口开发微信公众平台人脸识别系统的方法
2015/04/17 PHP
php实现简单加入购物车功能
2017/03/07 PHP
DD_belatedPNG,IE6下PNG透明解决方案(国外)
2010/12/06 Javascript
JavaScript中的单引号和双引号报错的解决方法
2014/09/01 Javascript
JavaScript的各种常见函数定义方法
2014/09/16 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
js漂浮广告实现代码
2015/08/15 Javascript
利用jQuery实现漂亮的圆形进度条倒计时插件
2015/09/30 Javascript
常用的js方法合集
2017/03/10 Javascript
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
2017/11/03 Javascript
工作中常用到的ES6语法
2018/09/04 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
vue基于两个计算属性实现选中和全选功能示例
2019/02/08 Javascript
js中对象与对象创建方法的各种方法
2019/02/27 Javascript
开发Node CLI构建微信小程序脚手架的示例
2020/03/27 Javascript
Vue中 axios delete请求参数操作
2020/08/25 Javascript
Python的Django中将文件上传至七牛云存储的代码分享
2016/06/03 Python
启动targetcli时遇到错误解决办法
2017/10/26 Python
python实现redis三种cas事务操作
2017/12/19 Python
python微信跳一跳系列之色块轮廓定位棋盘
2018/02/26 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
python初步实现word2vec操作
2020/06/09 Python
python编写扎金花小程序的实例代码
2021/02/23 Python
德国原装品牌香水、化妆品和手表网站:BRASTY.DE
2016/10/16 全球购物
美国知名日用品连锁超市:Dollar General(多来店)
2017/01/14 全球购物
美国领先的商务贺卡出版商:The Gallery Collection
2018/02/13 全球购物
什么是属性访问器
2015/10/26 面试题
办公室主任职责范文
2013/11/08 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
职工宿舍管理制度
2015/08/05 职场文书
班主任工作总结范文
2015/08/13 职场文书
React forwardRef的使用方法及注意点
2021/06/13 Javascript
Python编写车票订购系统 Python实现快递收费系统
2022/08/14 Python