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 相关文章推荐
表格 隔行换色升级版
Nov 07 Javascript
json数据处理技巧(字段带空格、增加字段、排序等等)
Jun 14 Javascript
javascript实现标签切换代码示例
May 22 Javascript
javascript动画之模拟拖拽效果篇
Sep 26 Javascript
JS获取年月日时分秒的方法分析
Nov 28 Javascript
微信开发之调起摄像头、本地展示图片、上传下载图片实例
Dec 08 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
详解在Javascript中进行面向切面编程
Apr 28 Javascript
javascript实现图片轮播代码
Jul 09 Javascript
VUE.js实现动态设置输入框disabled属性
Oct 28 Javascript
这样回答继承可能面试官更满意
Dec 10 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
php 远程关机操作的代码
2008/12/05 PHP
PHP 删除文件与文件夹操作 unlink()与rmdir()这两个函数的使用
2011/07/17 PHP
PHP empty函数报错解决办法
2014/03/06 PHP
PHP直接修改表内容DataGrid功能实现代码
2015/09/24 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
在Ubuntu 18.04上安装PHP 7.3 7.2和7.0的方法
2019/04/09 PHP
用js实现的检测浏览器和系统的函数
2009/04/09 Javascript
Extjs学习笔记之二 初识Extjs之Form
2010/01/07 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
js实现hashtable的赋值、取值、遍历操作实例详解
2016/12/25 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
JavaScript实现快速排序的方法分析
2018/01/10 Javascript
对Vue.js之事件的绑定(v-on: 或者 @ )详解
2018/09/15 Javascript
Jquery的autocomplete插件用法及参数讲解
2019/03/12 jQuery
JS实现简单tab选项卡切换
2019/10/25 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
Python探索之pLSA实现代码
2017/10/25 Python
Django框架自定义模型管理器与元选项用法分析
2019/07/22 Python
Django CBV类的用法详解
2019/07/26 Python
python Matplotlib底图中鼠标滑过显示隐藏内容的实例代码
2019/07/31 Python
关于tensorflow的几种参数初始化方法小结
2020/01/04 Python
Python修改列表值问题解决方案
2020/03/06 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
利用python绘制中国地图(含省界、河流等)
2020/09/21 Python
海淘零差价,宝贝全球购: 宝贝格子
2016/08/24 全球购物
工地安全检查制度
2014/02/04 职场文书
外语专业毕业生自荐信
2014/04/14 职场文书
暑期教师培训方案
2014/06/07 职场文书
节能标语大全
2014/06/21 职场文书
个人简历自荐信
2014/06/26 职场文书
2014年调度员工作总结
2014/11/19 职场文书
参观邀请函范文
2015/02/02 职场文书
2016七夕情人节感言
2015/12/09 职场文书
Go gRPC进阶教程gRPC转换HTTP
2022/06/16 Golang