js改变style样式和css样式的简单实例

js可实现用户对页面中的选择条件改变页面中的样式,页面样式可以通过style修饰,也可以通过css修饰,先来看一下js改变style样式,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Change.html</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
 <script language="javascript">
   function test4(event) {
	  if(event.value == "黑色") {
	   //获取div1
	   var div1 = document.getElementById('div1');
	   div1.style.backgroundColor="black";
	  }
	  if(event.value == "红色") {
	   //获取div1
	   var div1 = document.getElementById('div1');
	   div1.style.backgroundColor="red";
	  }
	 }
 </script>
</head>
<body>
 <div id="div1" style="width:400px; height:300px; background-color:red;">div1</div>
 <input type="button" value="黑色" onclick="test4(this)"/>
 <input type="button" value="红色" onclick="test4(this)"/>

 </body>
</html>

test4(this)代表当前的<input相当于把它看成一个对象。

再来看一下改变css样式,代码如下:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
 <head>
  <title>Change1.html</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">

  <link rel="stylesheet" type="text/css" href="css/Change.css">
 <script language="javascript">
   function test4(event) {
	 //获取样式表中所有class选择器都获得
	 var ocssRules = document.styleSheets[0].rules;
	 //从ocssRules中取出你希望的class
	 var style1 = ocssRules[0];
	 if(event.value == "黑色") {
	   //window.alert(style1.style.backgroundColor);
	   style1.style.backgroundColor="black";
	 }else if(event.value == "红色") {
	   style1.style.backgroundColor="red";
	 }

	 }
  </script>
</head>
<body>
 <div id="div1" class="style1">div1</div>
 <input type="button" value="黑色" onclick="test4(this)"/>
 <input type="button" value="红色" onclick="test4(this)"/>

 </body>
</html>

以上就是小编为大家带来的js改变style样式和css样式的简单实例全部内容了,希望大家多多支持我们~

时间: 2016-06-26

js获取页面引用的css样式表中的属性值方法(推荐)

如下所示: function getStyle(node, property){ if (node.style[property]) { return node.style[property]; } else if (node.currentStyle) { return node.currentStyle[property]; } else if (document.defaultView && document.defaultView.getComputedStyle) { var s

JavaScript动态添加css样式和script标签

[动态添加css样式] <html> <head> <script type="text/javascript"> window.onload=function(){ var head=document.getElementsByTagName('head')[0]; //获取到head元素 var link=document.createElement('link'); //创建link元素节点,也就是link标签 link.rel="s

JavaScript获取css行间样式,内连样式和外链样式的简单方法

[行间样式获取] <div id='div1' style="backgroud:red">测试</div> <script> var odiv=document.getElementById('div1'); //先获取到要获取样式的元素标签,也就是获取到div1 console.log(odiv.style.background); //这样我们就可以获取到了行间的样式了 </script> [内连样式获取] <html>

JS读写CSS样式的方法汇总

为了日后方便查询,本人翻阅了一些资料总结了以下方法,仅限原生JS,如有不对的地方欢迎指出!只求大家看完觉得有学到点什么就OK了! 一.可以通过DOM节点对象的style对象(即CSSStyleDeclaration对象)来读写文档元素的CSS样式 如:var elm = document.getElementById('test');       elm.style.color = 'black'; 二.通过Element对象的getAttribute().setAttribute().remo

如何用JavaScript实现动态修改CSS样式表

看过我写的<用JavaScript动态建立或增加CSS样式表的实现方法>之后,你就很容易想明白如何修改CSS样式表了. 正好今天在论坛碰到一位朋友问这样的一个问题: <style> .ls{width=120px;} </style> <script> //在这里加一句来改变.ls中width的值,如何写 </script> 有的朋友回答:"如果使用.ls的对象很多的话,用JS确实不方便, jquery方便,$(".ls&qu

用JavaScript动态建立或增加CSS样式表的实现方法

1.简单的方法,不管不顾,直接这样就可以: document.createStyleSheet().cssText = '标签{color:red;' + // 这个注释只在当前JS中帮助理解,并不会写入CSS中 'width:300px;height:150px}' + '.类名{--}' + '#ID们{--}' ; //完活.我喜欢分号这样写,和指令书写的起始位置对齐比较好一点,尤其是后面有其它语句的时候. 2.完善一点的方法,防止重复添加,可以通过添加样式表ID并对其判断来实现: if

js改变css样式的三种方法推荐

共用代码: <div id="div"> this is a div </div> var div=document.getElementById('div'); 第一种:用cssText div.style.cssText='width:250px;height:250px;border:1px red solid;'; 第二种:用setProperty() div.style.setProperty('width','250px'); div.style.s

javascript 动态修改css样式方法汇总(四种方法)

在很多情况下,都需要对网页上元素的样式进行动态的修改.在JavaScript中提供几种方式动态的修改样式,下面将介绍方法的使用.效果.以及缺陷. 1.使用obj.className来修改样式表的类名. 2.使用obj.style.cssTest来修改嵌入式的css. 3.使用obj.className来修改样式表的类名. 4.使用更改外联的css文件,从而改变元素的css 下面是一段html代码和css代码用来解释上面方法的区别的. CSS .style1{margin:10px auto ;b

javascript实现html页面之间参数传递的四种方法实例分析

本文实例讲述了javascript实现html页面之间参数传递的四种方法.分享给大家供大家参考,具体如下: 我们知道,在服务器端asp,jsp等程序可以接受html页面上的form传来的参数.那么,可不可以传递参数给html页面呢.可以. 原理:通过window.location.href中的分割符获得各个参数 方法一: /* *函数功能:从href获得参数 *sHref: http://www.cscenter.com.cn/arg.htm?arg1=d&arg2=re *sArgName:a

C#中DataTable 转换为 Json的方法汇总(三种方法)

在web开发中,我们可能会有这样的需求,为了便于前台的JS的处理,我们需要将查询出的数据源格式比如:List<T>.DataTable转换为Json格式.特别在使用Extjs框架的时候,Ajax异步请求的数据格式就是Json.鉴于此,我今天来分享将DataTable 转换成 Json的3种方法.换句话说如何在ASP.NET将一个DataTable序列化为 Json数组.或者如何从一个DataTable返回一个Json字符串.这篇文章将采用StringBuilder,JavaScriptSeri

微信小程序实现比较功能的方法汇总(五种方法)

首先在index.wxml页面写一个测试页面 如图: 代码如下 接下来就是比较功能的实现 第一种方法 首先在两个input组件中用bindchange方法绑定事件处理函数,在button组件中用bindtap绑定事件函数 如图 接下来在index.js中实现 代码如下 适用于页面中少量input组件的情况 第二种方法 第二种方法为两个input组件绑定相同的函数 通过id和dataset来获取元素 1.通过id获取 代码具体实现如下 2.通过dataset来获取元素 具体代码实现如下 第三种方法

使用位运算、值交换等方式反转java字符串的多种方法(四种方法)

在本文中,我们将向您展示几种在Java中将String类型的字符串字母倒序的几种方法. StringBuilder(str).reverse() char[]循环与值交换 byte循环与值交换apache-commons-lang3 如果是为了进行开发,请选择StringBuilder(str).reverse()API.出于学习的目的,我们可以研究char[]和byte方法,其中涉及到值互换和移位运算技术,这些技术对于了解StringBuilder(str).reverse()API黑匣子背后

javascript实现图片延迟加载方法汇总(三种方法)

看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家

js动态引入的四种方法

本文表述了关于js动态引入四种方式的实例代码.分享给大家供大家参考,具体如下: index.html <html> <head> <meta content="text/html;charset=utf-8" http-equiv="content-type"> <title> </title> <script src='' id="s1"></script> &

jquery实现动态改变css样式的方法分析

本文实例讲述了jquery实现动态改变css样式的方法.分享给大家供大家参考,具体如下: jquery 几乎成了现在开发WEB应用的标准JS库,这与其简单性和易用性是分不开的.作为一个后端开发人员,要做一些前端页面时,CSS 样式的控制是少不了需要掌握的.如果是静态的CSS,当然是可以直接写上去的,但有些界面是需要一些动态效果的,比如颜色变化,字体大小变化,甚至DIV 的隐藏于现实等,这些都需要用javascript 动态控制其CSS样式,下面就常用的jquery 控制 css 样式的方法做一个