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 美元符冲突的解决方法
Mar 28 Javascript
JQury slideToggle闪烁问题及解决办法
Jul 05 Javascript
JS中实现replaceAll的方法(实例代码)
Nov 12 Javascript
jQuery中bind与live的用法及区别小结
Jan 27 Javascript
JavaScript分析、压缩工具JavaScript Analyser
Dec 31 Javascript
js实现固定显示区域内自动缩放图片的方法
Jul 18 Javascript
jQuery+CSS实现滑动的标签分栏切换效果
Dec 17 Javascript
javascript基本语法
May 31 Javascript
AngularJs directive详解及示例代码
Sep 01 Javascript
weUI应用之JS常用信息提示弹层的封装
Nov 21 Javascript
实例详解vue.js浅度监听和深度监听及watch用法
Aug 16 Javascript
vuejs element table 表格添加行,修改,单独删除行,批量删除行操作
Jul 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
PHPMailer 中文使用说明小结
2010/01/22 PHP
PHP数据库万能引擎类adodb配置使用以及实例集锦
2014/06/12 PHP
PHP统一页面编码避免乱码问题
2015/04/09 PHP
合格的PHP程序员必备技能
2015/11/13 PHP
PHP实现随机数字、字母的验证码功能
2018/08/01 PHP
ECMAScript 基础知识
2007/06/29 Javascript
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
2013/06/19 Javascript
浅谈Javascript 执行顺序
2013/12/18 Javascript
jQuery实现移动端滑块拖动选择数字效果
2015/12/24 Javascript
Fullpage.js固定导航栏-实现定位导航栏
2016/03/17 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
详解闭包解决jQuery中AJAX的外部变量问题
2017/02/22 Javascript
JavaScript之浏览器对象_动力节点Java学院整理
2017/07/03 Javascript
jQuery实现鼠标移到某个对象时弹出显示层功能
2018/08/23 jQuery
JavaScript读写二进制数据的方法详解
2018/09/09 Javascript
vue3.0 CLI - 1 - npm 安装与初始化的入门教程
2018/09/14 Javascript
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
[00:44]TI7不朽珍藏III——军团指挥官不朽展示
2017/07/15 DOTA
NetworkX之Prim算法(实例讲解)
2017/12/22 Python
Python爬虫包BeautifulSoup简介与安装(一)
2018/06/17 Python
详解python中的装饰器
2018/07/10 Python
使用Python如何测试InnoDB与MyISAM的读写性能
2018/09/18 Python
python 3.6.5 安装配置方法图文教程
2018/09/18 Python
对Python3之进程池与回调函数的实例详解
2019/01/22 Python
使用Python实现跳帧截取视频帧
2019/05/31 Python
Pytorch 之修改Tensor部分值方式
2019/12/27 Python
CSS3的calc()做响应模式布局的实现方法
2017/09/06 HTML / CSS
巴西最大的家具及装饰用品店:Mobly
2017/10/11 全球购物
FC-Moto瑞典:欧洲最大的摩托车服装和头盔商店之一
2018/11/27 全球购物
印度尼西亚最完整和最大的在线药房网站:Farmaku.com
2019/11/23 全球购物
机械制造与自动化应届生求职信
2013/11/16 职场文书
英语故事演讲稿
2014/04/29 职场文书
增员口号大全
2014/06/18 职场文书
2014年班组工作总结
2014/11/20 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
分享几种python 变量合并方法
2022/03/20 Python