编程 Javascript

用脚本调用样式的几种方法

Posted in Javascript onDecember 09, 2006

之前经常遇见classname、csstext之类的词，却不知道如何用。最近着手网站实际建设，收获颇多，给还不懂的人分享一下。

通常在网页中样式表的调用方法有四种。第一是外链，即<link rel="StyleSheet" href = "/control/css/base.css">的形式；第二是输入样式表；第三是在网页头部申明，如<head> <style type="text/css">...；最后是直接在对象后写样式，即<div style = "width:80%...;">的形式。我们用脚本调用样式，也要从这几方面入手。

一、通常情况下，我们可以通过改变外链样式的的href的值实现网页样式的实时切换，也就是“改变模板风格”。这时候我们首先需要赋予需要改变的目标一个id，如

调用时很简单，如<span on click="javascript:document.getElementById('css').href = 'ie.css'">点我改变样式</span>

二、局部改变样式，分为改变直接样式，改变className和改变cssText三种。需要注意的是：第一，javascript对大小写十分敏感，className不能够把“N”写成“n”，cssText也不能够把“T”写成“t”，否则无法实现效果。第二，如果改变className，则事先在样式表中申明类，但调用时不要再跟style，像
document.getElementById('obj').style.className="..."的写法是错误的！
只能写成：document.getElementById('obj').className="..."

但是如果用cssText的话，必须加上style，正确的写法是：
document.getElementById('obj').style.cssText="..."

改变直接样式我就不必说了，大家记得要写到具体样式即可，如
document.getElementById('obj').style.backgroundColor="#003366"
对于新人往往不知道CSS具体样式在javascript怎么写，而且有时候在不同浏览器中要求也不一样。如float在IE中写成styleFloat，在FIREFOX中写成cssFloat，这就需要大家的积累了。在google中搜索“JSS”，也许会对你的疑惑有所帮助。

用脚本调用样式的几种方法

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jQuery模拟360浏览器切屏效果幻灯片(附demo源码下载)

Jan 29 Javascript

js创建jsonArray传输至后台及后台全面解析

Apr 11 Javascript

jQuery表单验证插件解析(推荐)

Jul 21 Javascript

js中Number数字数值运算后值不对的解决方法

Feb 28 Javascript

vue + socket.io实现一个简易聊天室示例代码

Mar 06 Javascript

详解小程序输入框闪烁及重影BUG解决方案

Aug 31 Javascript

vue中的计算属性实例详解

Sep 19 Javascript

通过扫小程序码实现网站登陆功能

Aug 22 Javascript

在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法

Sep 24 Javascript

JS document form表单元素操作完整示例

Jan 13 Javascript

vue操作dom元素的3种方法示例

Sep 20 Javascript

JavaScript实现拖动对话框效果的实现代码

Oct 12 Javascript

用js计算页面执行时间的函数

Dec 07 #Javascript

JS获取IUSR_机器名和IWAM_机器名帐号的密码

Dec 06 #Javascript

找到一点可怜的关于dojo资料，谢谢作者！

Dec 06 #Javascript

jQuery的一些注意

Dec 06 #Javascript

基于prototype的validation.js发布2.3.4新版本,让你彻底脱离表单验证的烦恼

Dec 06 #Javascript

鼠标移动到一张图片时变为另一张图片

Dec 05 #Javascript

JS日历推荐

Dec 03 #Javascript