利用javascript实现css操作
在很多情况下,都需要对网页上元素的样式进行动态的修改。在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用、效果、以及缺陷。
1、使用obj.className来修改样式表的类名。
2、使用obj.style.cssTest来修改嵌入式的css。
3、使用obj.className来修改样式表的类名。
4、使用更改外联的css文件,从而改变元素的css
下面是一段html代码和css代码用来解释上面方法的区别的。
CSS
.style1{margin:10px auto ;background-color:#9999FF;
display:block;color:White; border:1px solid white; padding:10px 25px; font-size:18px; } .style1:hover{ background-color:#66B3FF; cursor:pointer;} .style2{margin:10px auto ;background-color:gray; display:block;
color:black; border:1px solid white; padding:10px 25px; font-size:18px; } .style2:hover{ background-color:black; color:White; cursor:pointer}
HTML
<div>
<input id="btnB" type="button" name="btnLogin" value="登录" class="style1" />
<div id="tool">
<input type="button" value="【obj.style.className】更改样式" onclick="changeBackgroundColor()"/>
<input type="button" value="【obj.style.cssText】更改样式" onclick="changeFontSize()" />
<input type="button" value="【obj.className】更改样式" onclick="addRadius()" />
<input type="button" value="更改外联css样式" onclick="recover()" />
</div>
</div>
方法一、使用obj.className来修改样式表的类名
从下面的代码可以看出ob.style.cssTest是如何来btnB的样式的。
function changeStyle1() {
var obj = document.getElementById("btnB");
obj.style.backgroundColor= "black"; }
该段代码修改btB的文字的颜色,在浏览器中打开调试工具,可以发现btB标签中多了一个属性【style="内联式>外联式。而btB的hove伪类的background-color样式写在内联式中,所以嵌入式的background-color覆盖了伪类中,这就使得鼠标放入btB上感觉不到背景颜色的变化。
方法二、使用obj.style.cssTest来修改嵌入式的css
直接上JavaScript代码:
function changeStyle2() {
var obj = document.getElementById("btnB");
obj.style.cssText = "background-color:black; display:block;color:White; }
该段代码和【一】中的效果是一样的,缺陷也是一样。
方法三、使用obj.className来修改样式表的类名
使用代码来修改btB引用样式的类名,如下段代码:
function changeStyle3() {
var obj = document.getElementById("btnB");
//obj.className = "style2";
obj.setAttribute("class", "style2");
}
通过更改btB的css的类名的方式来更改样式,更改样式类名有两种方式。1、obj.className = "style2"; 2、 obj.setAttribute("class", "style2");都是一样的效果。
用这种方式来修改css比上面的效果要好很多。
方法四、使用更改外联的css文件,从而改变元素的css
通过更改外联的css文件引用从而来更改btB的样式,操作很简单。代码如下:
首先得引用外联的css文件,代码如下:
<link href="css1.css" rel="stylesheet" type="text/css" id="css"/> function changeStyle4() {
var obj = document.getElementById("css");
obj.setAttribute("href","css2.css");
}
这样也能方便的更改btB的样式,个人觉得这种方式是最好用的,是实现整体页面换肤的最佳方案。
利用javascript实现css操作的更多相关文章
- jQuery DOM/属性/CSS操作
jQuery DOM 操作 创建元素 只需要把DOM字符串传入$方法即可返回一个 jQuery 对象 var obj = $('<div class="test">&l ...
- JQuery巧妙利用CSS操作打印样式
一.添加打印样式 1. 为屏幕显示和打印分别准备一个css文件,如下所示: 用于屏幕显示的css: <link rel="stylesheet" href="cs ...
- 利用Javascript判断操作系统的类型实现不同操作系统下的兼容性
原文地址 http://www.jb51.net/article/33640.htm 在通过Javascript实现客户端和服务端的交互时,有时候需要对操作系统进行判断,以便实现不同操作系统下的兼容性 ...
- 优化网站设计(十):最小化JAVASCRIPT和CSS
前言 网站设计的优化是一个很大的话题,有一些通用的原则,也有针对不同开发平台的一些建议.这方面的研究一直没有停止过,我在不同的场合也分享过这样的话题. 作为通用的原则,雅虎的工程师团队曾经给出过35个 ...
- Python之路day13 web 前端(JavaScript,DOM操作)
参考链接:http://www.cnblogs.com/wupeiqi/articles/5433893.html day13 1. CSS示例 2. JavaScript 3. DOM操作 上节内容 ...
- 网站开发综合技术 三 JavaScript的DOM操作
第3部分 JavaScript的DOM操作 1.DOM的基本概念 DOM是文档对象模型,这种模型为树模型:文档是指标签文档:对象是指文档中每个元素:模型是指抽象化的东西. 2.Windows对象操作 ...
- (Demo分享)利用JavaScript(JS)实现一个九宫格拖拽功能
利用JavaScript(JS)实现一个九宫格拖拽功能 Demo实现了对任意方格进行拖拽,可以交换位置,其中Demo-1利用了勾股定理判断距离! Demo-1整体思路: 1.首先div实现自由移动 ...
- 前端html、Javascript、CSS技术小结
简单地总结了一下前端用过的html.javascript.css技术,算是清点一下,做个大略的小结,为进一步的学习给个纲领. 一.HTML 由于HTML5的兴起,简单地判断一个网页是否是html5网页 ...
- 利用javascript和WebGL绘制地球 【翻译】
利用javascript和WebGL绘制地球 [翻译] 原翻译:利用javascript和WebGL绘制地球 [翻译] 在我们所有已知的HTML5API中,WebGL可能是最有意思的一个,利用这个AP ...
随机推荐
- angular开发控制器之间的通信
一.指令与控制器之间通信,无非是以下几种方法: 基于scope继承的方式 基于event传播的方式 service的方式(单例模式) 二.基于scope继承的方式: 最简单的让控制器之间进行通信的方法 ...
- js的mime类型有哪些?
js中的mime类型 常见类型 扩展名 类型/子类型 txt text/plain doc application/msword exe application/octet-stream pdf ap ...
- wpgcms---单片页数据渲染
单片页数据渲染,使用Twig的标签语法: <h1> {{ contentInfo.title }} </h1> {% autoescape false %} {{ conten ...
- K-means中的K值选择
关于如何选择Kmeans等聚类算法中的聚类中心个数,主要有以下方法(译自维基): 1. 最简单的方法:K≍sqrt(N/2) 2. 拐点法:把聚类结果的F-test值(类间Variance和全局Var ...
- Maven 搭建 SSM框架——Spring+SpringMVC+Mybatis的搭建教程
一:概述 SSM框架在项目开发中经常使用到,相比于SSH框架,它在仅几年的开发中运用的更加广泛. Spring作为一个轻量级的框架,有很多的拓展功能,最主要的我们一般项目使用的就是IOC和AOP.Sp ...
- hihocoder 1323 - 回文字符串 - [hiho一下162周][区间dp]
用dp[i][j]表示把[i,j]的字符串str改写成回文串需要的最小操作步数. 并且假设所有dp[ii][jj] (ii>i , jj<j)都为已知,即包括dp[i+1][j].dp[i ...
- hdu-4283 You Are the One 区间dp,
题意:n个人排队上台,每个人有一屌丝值D,他的不满意值=D*(k-1)(k为他前面的总人数). 求整个队列不满意值之和的最小值.你只有一个操作,就是把队首的人塞进小黑屋,也就是压入栈中,后面的人就被提 ...
- Django - 日期、时间字段
创建django的model时,有DateTimeField.DateField和TimeField三种类型可以用来创建日期字段,其值分别对应着datetime().date().time()三中对象 ...
- SUSE12的虚拟机安装以及ORACLE12C的安装
在本文中用到的所有参数,均位于文后附录中 在VMware中新建虚拟机,建好之后挂载光盘,启动虚拟机进入安装界面 初始化中 选择跳过注册 选择DVD模式 选择接受许可证条款 默认选择 选择默认系统 选择 ...
- 【PyQt5-Qt Designer】QComboBox(下拉列表框) 使用模板
import sys from PyQt5.QtWidgets import * from PyQt5.QtGui import * from PyQt5.QtCore import * ###### ...