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样式的简单实例全部内容了，希望大家多多支持我们~

赞 (0)

相关推荐

  • JS读写CSS样式的方法汇总

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

  • 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

  • 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样式方法汇总(四种方法)

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

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

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

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

  • 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-t

  • 原生JS实现获取及修改CSS样式的方法

    本文实例讲述了原生JS实现获取及修改CSS样式的方法.分享给大家供大家参考,具体如下: 大家都知道在JavaScript原生操作中获取元素的样式,在实际操作是使用时比较频繁的一件事,这里像大家介绍下获取css样式的方法,希望可以帮助一些需要的人,如果有幸被大牛看到,有更好的办法,欢迎提出!!! 一.行内元素样式获取: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-

  • 原生js实现jquery函数animate()动画效果的简单实例

    通过在公司一个月的实习,慢慢的对css跟html算是比较熟悉了,这几天开始研究js,今天用js写了一个jquery的animate函数,测试了下,性能还可以.个人觉得jquery并不是万能的,因为是个框架,所以有些东西写的比较死,就像animate函数一样,可选的参数不多有时候可能并不能实现我们想要的效果. 注释的部分是用来测试用的,写代码的过程并不是十分顺利,因为用js平时用的不是很细,都是大体知道方法,也用过,但等到真正要实现动画函数的时候,细枝末节写错了就可能把人难住了. 函数里面有几个参

  • 纯JS实现可拖拽表单的简单实例

    因为要用到可拖拽表单,个人要比较喜欢自己动手,不怎么喜欢在不懂实现或者原理的情况下用插件,所以查找资料实现了一个. 思路:放入:用mousedown判断鼠标点击的位置是否在触发控件的位置,如果是,mousemove的时候clone一个控件,修改透明度,然后放入容器内的时候remove这个控件,并且在容器内生成一个放入的控件(放入的控件和触发的控件可以不一样) 拖拽:同样的, mousedown的时候判断是哪个控件,mousemove的时候需要放一个占位div放在原有的位置上,并将元素修改透明度然

  • JS实现回到页面顶部动画效果的简单实例

    最近在模仿各大网站写页面样式和交互,发现好多都有回到顶部的需要,所以写了一下js,记录下来. 发现还可以添加从快到慢的动画效果和随时下拉滚动条停止滚动的功能, 参考了imooc上相关课程,最终实现JS代码如下: //页面加载后触发 window.onload = function(){ var btn = document.getElementById('btn'); var timer = null; var isTop = true; //获取页面可视区高度 var clientHeight

  • js实现html table 行,列锁定的简单实例

    js实现html table 行,列锁定的简单实例

    js实现html table 表头,指定列锁定 实现效果如下: 感兴趣的朋友可以直接复制出来运行看效果. <!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"

  • 用js动态添加html元素,以及属性的简单实例

    用js动态添加html元素,以及属性的简单实例 function test(){ //创建节点 var lswt_2=document.createElement("div"); //设置节点id lswt_2.id='lswtColse'; //设置节点属性 lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.st

  • js 弹出虚拟键盘修改密码的简单实例

    实例如下: //定义当前是否大写的状态 window.onload= function() { password1=null; initCalc(); } var CapsLockValue=0; var check; function setVariables() { tablewidth=630; // logo width, in pixels tableheight=20; // logo height, in pixels if (navigator.appName == "Netsc

  • js操作DOM--添加、删除节点的简单实例

    js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javascript" type="text/javascript"> <!-- function nodestatus(node) { var temp=""

随机推荐