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 相关文章推荐
setInterval与clearInterval的使用示例代码
Jan 28 Javascript
Jquery 在页面加载后执行的几种方式
Mar 14 Javascript
js实现Select头像选择实时预览代码
Aug 17 Javascript
Bootstrap导航条可点击和鼠标悬停显示下拉菜单
Nov 25 Javascript
javascript 作用于作用域链的详解
Sep 27 Javascript
vue1.0和vue2.0的watch监听事件写法详解
Sep 11 Javascript
JavaScript数组方法的错误使用例子
Sep 13 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
Sep 28 Javascript
详解Node.js一行命令上传本地文件到服务器
Apr 22 Javascript
仿ElementUI实现一个Form表单的实现代码
Apr 23 Javascript
vue实现的请求服务器端API接口示例
May 25 Javascript
vue+axios实现post文件下载
Sep 25 Javascript
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
如何将数据从文本导入到mysql
2006/10/09 PHP
php 提交表单 关闭layer弹窗iframe的实例讲解
2018/08/20 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
2010/05/31 Javascript
js中的值类型和引用类型小结 文字说明与实例
2010/12/12 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
JavaScript学习心得之概述
2015/01/20 Javascript
提交按钮的name='submit'引起的js失效问题及原因
2015/02/25 Javascript
JS实现的另类手风琴效果网页内容切换代码
2015/09/08 Javascript
jquery UI Datepicker时间控件的使用方法(加强版)
2015/11/07 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
Swiper实现轮播图效果
2017/07/03 Javascript
vue跳转同一个组件,参数不同,页面接收值只接收一次的解决方法
2019/11/05 Javascript
VSCode 配置uni-app的方法
2020/07/11 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
微信小程序实现购物车小功能
2020/12/30 Javascript
Python导出数据到Excel可读取的CSV文件的方法
2015/05/12 Python
Python os模块学习笔记
2015/06/21 Python
python实现批量修改服务器密码的方法
2019/08/13 Python
使用python3 实现插入数据到mysql
2020/03/02 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
在PyCharm中安装PaddlePaddle的方法
2021/02/05 Python
Timberland德国官网:靴子、鞋子、衣服、夹克及配件
2019/12/10 全球购物
科室工作个人总结的自我评价
2013/10/29 职场文书
应届生如何写自荐信
2014/01/05 职场文书
残疾人创业典型事迹
2014/02/01 职场文书
2014年挂职干部工作总结
2014/12/06 职场文书
公司会议开幕词
2015/01/29 职场文书
开除员工通知
2015/04/22 职场文书
教师节倡议书2015
2015/04/27 职场文书
教师节随笔
2015/08/15 职场文书
2016基督教会圣诞节开幕词
2016/03/04 职场文书
详细聊聊vue中组件的props属性
2021/11/02 Vue.js
人民币符号
2022/02/17 杂记
口袋妖怪冰系十大最强精灵,几何雪花排第七,第六类似北极熊
2022/03/18 日漫
redis protocol通信协议及使用详解
2022/07/15 Redis