JavaScript修改css样式style动态改变元素样式


Posted in Javascript onDecember 16, 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="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 相关文章推荐
用js怎么把&amp;字符换成&quot;&amp;amp:&quot;
Oct 19 Javascript
读jQuery之十四 (触发事件核心方法)
Aug 23 Javascript
12个非常实用的JavaScript小技巧【推荐】
May 18 Javascript
js基于cookie方式记住返回页面用法示例
May 27 Javascript
jquery  实现轮播图详解及实例代码
Oct 12 Javascript
Vue 固定头 固定列 点击表头可排序的表格组件
Nov 25 Javascript
js 博客内容进度插件详解
Feb 19 Javascript
jQuery布局组件EasyUI Layout使用方法详解
Feb 28 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
微信小程序wx.request实现后台数据交互功能分析
Nov 25 Javascript
微信小程序使用component自定义toast弹窗效果
Nov 27 Javascript
在Vue项目中引入JQuery-ui插件的讲解
Jan 27 jQuery
使用apply方法实现javascript中的对象继承
Dec 16 #Javascript
javaScript如何生成xmlhttp
Dec 16 #Javascript
JS onmousemove鼠标移动坐标接龙DIV效果实例
Dec 16 #Javascript
JS实现模仿微博发布效果实例代码
Dec 16 #Javascript
JSON无限折叠菜单编写实例
Dec 16 #Javascript
使用JSLint提高JS代码质量方法分享
Dec 16 #Javascript
javascript操作table(insertRow,deleteRow,insertCell,deleteCell方法详解)
Dec 16 #Javascript
You might like
PHP 表单提交给自己
2008/07/24 PHP
PHP字符串处理的10个简单方法
2010/06/30 PHP
php常用表单验证类用法实例
2015/06/18 PHP
实例讲解php将字符串输出到HTML
2019/01/27 PHP
php实现快速对二维数组某一列进行组装的方法小结
2019/12/04 PHP
javascript下string.format函数补充
2010/08/24 Javascript
javascript自定义的addClass()方法
2014/05/28 Javascript
jquery左边浮动到一定位置时显示返回顶部按钮
2014/06/05 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
javascript 闭包详解
2015/02/15 Javascript
JavaScript实现同时调用多个函数的方法
2015/11/09 Javascript
jQuery实现简单隔行变色的方法
2016/02/20 Javascript
AngularJS基础 ng-copy 指令实例代码
2016/08/01 Javascript
超实用的javascript时间处理总结
2016/08/16 Javascript
JavaScript获取中英文混合字符串长度的方法示例
2017/02/04 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
记一次react前端项目打包优化的方法
2020/03/30 Javascript
原生js实现自定义滚动条组件
2021/01/20 Javascript
[10:14]2018DOTA2国际邀请赛寻真——paiN Gaming不仅为自己而战
2018/08/14 DOTA
[01:18]PWL开团时刻DAY10——一拳超人
2020/11/11 DOTA
Python文件的读写和异常代码示例
2017/10/31 Python
利用Python批量提取Win10锁屏壁纸实战教程
2018/03/27 Python
selenium+python 去除启动的黑色cmd窗口方法
2018/05/22 Python
对python 命令的-u参数详解
2018/12/03 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python与pycharm有何区别
2020/07/01 Python
美国最受欢迎的度假租赁网站:VRBO
2016/08/02 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
机械设计及其自动化求职推荐信
2014/02/17 职场文书
借名购房协议书范本
2014/10/06 职场文书
大学生自荐材料范文
2014/12/30 职场文书
大学四年个人总结
2015/03/03 职场文书
2016应届毕业生实习评语
2015/12/01 职场文书
Python selenium的这三种等待方式一定要会!
2021/06/10 Python
WINDOWS 64位 下安装配置mysql8.0.25最详细的教程
2022/03/22 MySQL
Python中的 No Module named ***问题及解决
2022/07/23 Python