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的返回顶部效果(兼容IE6)
Jan 17 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
Oct 25 Javascript
JS弹出层单纯的绝对定位居中示例代码
Feb 18 Javascript
使用javascript实现监控视频播放并打印日志
Jan 05 Javascript
JavaScript实现多个重叠层点击切换效果的方法
Apr 24 Javascript
js实现搜索框关键字智能匹配代码
Mar 26 Javascript
js封装成插件的步骤方法
Sep 11 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
node.js 微信开发之定时获取access_token
Feb 07 Javascript
jQuery实时统计输入框字数及限制
Jun 24 jQuery
jQuery-App输入框实现实时搜索
Nov 19 jQuery
JavaScript 如何在浏览器中使用摄像头
Dec 02 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
解析在zend Farmework下如何创立一个FORM表单
2013/06/28 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP连接MSSQL方法汇总
2016/02/05 PHP
php禁用函数设置及查看方法详解
2016/07/25 PHP
使用ThinkPHP生成缩略图及显示
2017/04/27 PHP
Yii2框架类自动加载机制实例分析
2018/05/02 PHP
mac pecl 安装php7.1扩展教程
2019/10/17 PHP
一个js拖拽的效果类和dom-drag.js浅析
2010/07/17 Javascript
javascript延时加载之defer测试
2012/12/28 Javascript
js replace正则表达式应用案例讲解
2013/01/17 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
Jquery搜索父元素操作方法
2015/02/10 Javascript
jQuery实现带动画效果的多级下拉菜单代码
2015/09/08 Javascript
AngularJS过滤器filter用法分析
2016/12/11 Javascript
通过一个简单的例子学会vuex与模块化
2017/11/22 Javascript
JS实现的简单分页功能示例
2018/08/23 Javascript
一百行JS代码实现一个校验工具
2019/04/30 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
微信小程序实现单个卡片左滑显示按钮并防止上下滑动干扰功能
2019/12/06 Javascript
JavaScript中的this原理及6种常见使用场景详解
2020/02/14 Javascript
vue中echarts图表大小适应窗口大小且不需要刷新案例
2020/07/19 Javascript
python 字符串split的用法分享
2013/03/23 Python
python实现批量视频分帧、保存视频帧
2019/05/31 Python
jupyter 实现notebook中显示完整的行和列
2020/04/09 Python
英国顶级家庭折扣店:The Works
2017/09/06 全球购物
毕业生机械建模求职信
2013/10/14 职场文书
护士的岗位职责
2013/12/04 职场文书
《三峡》教学反思
2014/03/01 职场文书
建筑工地标语
2014/06/18 职场文书
常务副总经理岗位职责
2015/02/02 职场文书
紫日观后感
2015/06/05 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
Nginx反爬虫策略,防止UA抓取网站
2021/03/31 Servers
MySQL RC事务隔离的实现
2022/03/31 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js