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

修改css样式style在某些情况下还是比较实用的,可以动态改变一些样式,接下来为大家介绍下使用JavaScript是如何做到的

一、局部改变样式

分为改变直接样式,改变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教程 时间:2012-01-04 人气:8
本文关键词:
分享到:

相关文章

  • 用JavaScript修改CSS属性 2012-07-27

    只有写原生的javascript了。 1.用JS修改标签的 class 属性值: class 属性是在标签上引用样式表的方法之一,它的值是一个样式表的选择符,如果改变了 class 属性的值,标签所引用的样式表也就更换了,所以这属于第一种修改方法。 更改一个标签的 class 属性的代码是: document.getElementById( id ).className = 字符串; document.getElementById( id ) 用于获取标签对应的 DOM 对象,你也可以用其它方法

  • JavaScript CSS-DOM 2014-12-03

    JavaScript CSS-DOM 一:简介 JavaScriptCSS-DOM是通过JavaScript去改变HTML-DOM的显示形式、即样式。如element.style.fontSize = 15em;此种形式。与CSS相比、CSS-DOM可以定时重复的执行一些样式渲染或者改变、这是CSS所不能实现的。 二:DOM Core HTML-DOM CSS-DOM关系 DOMCore是DOM API提供的用于操作页面元素的基础方法、比如根据id、标签名获取元素标签等 HTML-DOM同样是J

  • 最新的Javascript和CSS应用技巧荟萃 2014-12-17

    随着前端技术的发展,javascript和css在网站和web应用中展现出强大的统治力,特别是随着HTML5和CSS3的标准的成熟,我们可以使用javascript和css开发出你想都没有想到过的特效和动画,在今天的这篇文章中,我们将介绍一组相关CSS和javascript的强大教程和插件,希望大家喜欢! CSS动画和过渡效果 随着CSS3标准的来到,CSS过渡效果和动画效果常常应用到互动的用户体验中,设计师可以通过CSS创建出令人惊叹的效果和体验,这里我们将挑选最棒的特效,希望大家能够从中受益

  • Javascript改变CSS样式 2013-04-30

    改变CSS样式分为局部和全局,下面为大家介绍下使用Javascript具体的实现,感兴趣的朋友可以参考下 一、局部改变样式 有三种方法:直接改变样式、改变className和改变cssText 改变className: document.getElementById('obj').className="…" 改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;"; 改变

  • JavaScript+CSS控制打印格式示例介绍 2013-11-16

    1. 用media="print"的css来控制要打印的文件testPrint.html中引用media为print的样式,表示打印时该样式才起作用 代码如下: <link href="/style/print.css" rel="stylesheet" type="text/css" media="print"> /style/print.css文件 代码如下: .noprint{display:none;} 在testPrint.html中使用print.css中的样式,在网页浏

  • javascript操作css属性 2013-10-09

    今天因需要用到js获取css属性,网上搜了半天都不合适的。有一下几种方法 代码如下: var getstyle = function(elementID,attribute){ obj = document.getElementById(elementID); // 前面是IE后面是html的标准 return obj.currentStyle ? obj.currentStyle[attribute] : document.defaultView.getComputedStyle(obj, f

  • CSS和JavaScript在线代码压缩工具推荐 2014-02-28

    网页前端的JavaScript代码编写好之后,不像C语言会编译成机器码,作为脚本语言,JavaScript是直接从源码文件执行的。通常为了节省空间,可以把代码进行压缩,去掉多余的空格和换行等(代码可以全部写到一行,这个有点像C语言)。同样HTML,CSS等代码也可以进行这样的压缩操作。 功能全面的在线工具集:tool.lu 之前一直用的是tool.lu这套工具。包含了全套的工具,特别是其中的CSS工具,不仅能和其他工具一样做最大化压缩,也可以进行净化操作,产生既方便查看修改、又能兼顾文件大小的格

  • WordPress 技巧:只在相关页面导入 Contact Form 7 的 JS 和 CSS 2012-06-02

    Contact Form 7 是一个非常强大并且易用的联系表单的插件,我在很多项目中都用到它,但是这个插件有个很不好的地方,会在整个博客的所有前台页面都导入 Contact Form 7 的 JavaScript 和 CSS 代码,对于性能要求极致的我们,当然不允许这样的事情发生,所以我们可以通过下面的代码实现只在含有 Contact Form 7 表单的页面导入 Contact Form 7 的 JS 和 CSS 代码。 add_action ( 'wp_enqueue_scripts', '

  • JavaScript下拉菜单实现代码 2013-01-30

    利用css+js实现的下拉菜单。通过getElementsByTagName获取ul,隐藏显示。 效果图: 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head ru

Copyright (C) quwantang.com, All Rights Reserved.

趣玩堂 版权所有 京ICP备15002868号

processed in 0.187 (s). 10 q(s)