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 短路法代码精简
Aug 20 Javascript
javascript 定义初始化数组函数
Sep 07 Javascript
JavaScript聚焦于第一个字段的代码
Oct 15 Javascript
按下Enter焦点移至下一个控件的实现js代码
Dec 11 Javascript
jQuery的文档处理程序详解
May 10 Javascript
从重置input file标签中看jQuery的 .val() 和 .attr(“value”) 区别
Jun 12 Javascript
原生JS简单实现ajax的方法示例
Nov 29 Javascript
angular实现商品筛选功能
Feb 01 Javascript
微信小程序chooseImage的用法(从本地相册选择图片或使用相机拍照)
Aug 22 Javascript
微信小程序 动态修改页面数据及参数传递过程详解
Sep 27 Javascript
在Layui中操作数据表格,给指定单元格添加事件示例
Oct 26 Javascript
原生js实现弹窗消息动画
Nov 20 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/11/19 PHP
php循环语句 for()与foreach()用法区别介绍
2012/09/05 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
PHP实现倒计时功能
2020/11/16 PHP
在JavaScript中通过URL传递汉字的方法
2007/04/09 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
2014/09/02 Javascript
JavaScript实现网站访问次数统计代码
2015/08/12 Javascript
javaScript实现可缩放的显示区效果代码
2015/10/26 Javascript
jquery中object对象循环遍历的方法
2015/12/18 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
微信小程序支付PHP代码
2018/08/23 Javascript
解决vue-router在同一个路由下切换,取不到变化的路由参数问题
2018/09/01 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
2018/09/07 Javascript
详解Node.js 中使用 ECDSA 签名遇到的坑
2018/11/26 Javascript
17个Python小技巧分享
2015/01/23 Python
Python subprocess模块常见用法分析
2018/06/12 Python
Python实现深度遍历和广度遍历的方法
2019/01/22 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
Python3使用xml.dom.minidom和xml.etree模块儿解析xml文件封装函数的方法
2019/09/23 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
python 视频下载神器(you-get)的具体使用
2021/01/06 Python
详解CSS3中常用的样式【基本文本和字体样式】
2020/10/20 HTML / CSS
HTML5标签与HTML4标签的区别示例介绍
2013/07/18 HTML / CSS
俄罗斯和世界各地的酒店预订:Hotels.com俄罗斯
2016/08/19 全球购物
Melissa鞋马来西亚官方网站:MDreams马来西亚
2018/04/05 全球购物
adidas爱尔兰官方网站:阿迪达斯运动鞋和运动服
2019/11/01 全球购物
BannerBuzz加拿大:在线定制横幅印刷、广告和标志
2020/03/10 全球购物
Traffic People官网:女式花裙、上衣和连身裤
2020/10/12 全球购物
怎样有效的进行自我评价
2013/10/06 职场文书
家居设计专业个人自荐信范文
2013/11/26 职场文书
财务工作者先进事迹材料
2014/01/17 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
党员民主评议总结
2014/10/20 职场文书
vue中this.$http.post()跨域和请求参数丢失的解决
2022/04/08 Vue.js