JavaScript修改css样式style


Posted in Javascript onApril 15, 2008

一、局部改变样式
分为改变直接样式,改变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="http://www.ccvita.com/demo.css" type="text/css">
</link></head>
而在XML中,你应该如下例所示在声明区中加入:

< ? xml-stylesheet type="text/css" href="http://www.dhtmlet.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 相关文章推荐
Display SQL Server Version Information
Jun 21 Javascript
选择复选框按钮置灰否则按钮可用
May 22 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
bootstrap3 兼容IE8浏览器!
May 02 Javascript
JS实现禁止高频率连续点击的方法【基于ES6语法】
Apr 25 Javascript
关于在mongoose中填充外键的方法详解
Aug 14 Javascript
laravel5.3 vue 实现收藏夹功能实例详解
Jan 21 Javascript
微信小程序实现聊天对话(文本、图片)功能
Jul 06 Javascript
JavaScript中七种流行的开源机器学习框架
Oct 11 Javascript
JS回调函数 callback的理解与使用案例分析
Sep 09 Javascript
vue实现列表拖拽排序的示例代码
Apr 08 Vue.js
javascript的键盘控制事件说明
Apr 15 #Javascript
关于document.cookie的使用javascript
Apr 11 #Javascript
javascript比较文档位置
Apr 08 #Javascript
js函数般调用正则
Apr 08 #Javascript
javascript背投广告代码的完善
Apr 08 #Javascript
大家未必知道的Js技巧收藏
Apr 07 #Javascript
用JavaScript调用WebService的示例
Apr 07 #Javascript
You might like
php在线代理转向代码
2012/05/05 PHP
php实现简单的MVC框架实例
2015/09/23 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
Thinkphp5.0框架视图view的循环标签用法示例
2019/10/12 PHP
使用laravel根据用户类型来显示或隐藏字段
2019/10/17 PHP
网页里控制图片大小的相关代码
2006/06/25 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
jquery五角星评分插件示例分享
2014/02/21 Javascript
jQuery页面加载初始化常用的三种方法
2014/06/04 Javascript
jQuery中clearQueue()方法用法实例
2014/12/29 Javascript
Query常用DIV操作获取和设置长度宽度的实现方法
2016/09/19 Javascript
使用 vue.js 构建大型单页应用
2018/02/10 Javascript
高性能js数组去重(12种方法,史上最全)
2019/12/21 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[02:42]2014DOTA2国际邀请赛 三冰专访:我会打到Ti20
2014/07/13 DOTA
[38:39]完美世界DOTA2联赛循环赛 IO vs GXR BO2第二场 11.04
2020/11/05 DOTA
python写的ARP攻击代码实例
2014/06/04 Python
python 网络爬虫初级实现代码
2016/02/27 Python
用virtualenv建立多个Python独立虚拟开发环境
2017/07/06 Python
Python使用当前时间、随机数产生一个唯一数字的方法
2017/09/18 Python
利用Pandas 创建空的DataFrame方法
2018/04/08 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python爬虫实现获取动态gif格式搞笑图片的方法示例
2018/12/24 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
Python字典dict常用方法函数实例
2020/11/09 Python
HTML5新标签兼容——&gt; 的两种方法
2018/09/12 HTML / CSS
canvas压缩图片以及卡片制作的方法示例
2018/12/04 HTML / CSS
波兰最早的运动鞋精品店之一:Street Supply
2019/08/29 全球购物
Jones New York官网:美国女装品牌,受白领女性欢迎
2019/11/26 全球购物
生物医学工程专业学生求职信范文分享
2013/12/14 职场文书
企业法人代表授权委托书
2014/10/02 职场文书
作弊检讨书范文
2015/05/06 职场文书
2016年入党心得体会范文
2016/01/23 职场文书
施工安全协议书
2016/03/22 职场文书
python 爬取京东指定商品评论并进行情感分析
2021/05/27 Python
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js