javascript-行间样式

1、行间样式

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  #div1 {width: 200px;height: 200px;border: 1px solid black;}
 </style>
 <script>
  function toRed()
  {
   var oDiv=document.getElementById(‘div1‘);
   oDiv.style.background=‘red‘;  --->  style操作行间样式
  }
 </script>
</head>
<body>
 <input type="button" value="变红"  />
 <div id="div1"></div>   --->   <div id="div1" style="background: red none repeat scroll 0% 0%;"></div>

</body>
</html>

2、样式优先级带来的问题

通配符*  <    标签   <   class   <   id   < 行间样式

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Document</title>
 <style>
  #div1 {width: 200px;height: 200px;border: 1px solid black;}
  .color_green {background: green}
 </style>
 <script>
  function toRed()
  {
   var oDiv=document.getElementById(‘div1‘);
   oDiv.style.background=‘red‘;
   // oDiv.className=‘.color_green‘;
  }
  function toGreen() 
  {
   var oDiv=document.getElementById(‘div1‘);
   //oDiv.style.background=‘red‘;
   oDiv.className=‘color_green‘;
  }
 </script>
</head>
<body>
 <input type="button" value="变绿"  >
 <input type="button" value="变红"  />
 <div id="div1"></div>
</body>
</html>

先变绿，再变红；有效

<div id="div1"></div>   -->    <div id="div1" class="color_green"></div>   --->  <div id="div1" class="color_green" style="background: red none repeat scroll 0% 0%;"></div>

先变红，再变绿；失效

<div id="div1"></div>   -->   <div id="div1" style="background: red none repeat scroll 0% 0%;"></div>   --->   <div id="div1" style="background: red none repeat scroll 0% 0%;" class="color_green"></div>

建议：一直使用同一个class或者style

时间： 2024-08-25 23:36:53

javascript-行间样式的相关文章

javascript 行间样式与非行间样式获取方法

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .style001 {width: 300px;height: 300px;margin: 20px;padding: 30px;border: 20px gr

JavaScript 学习—— js获取行间样式和非行间样式

1. 问题引入 <head> <style> #div1{ width:150px; height:200px; position:absolute; left:-150px; background: green; } </style> <script> window.onload = function(){ var oDiv1 = document.getElementById('div1'); alert(oDiv1.style.left); //获取l

javascript获取行间样式和非行间样式--兼容写法

style:获取行间样式: currentStyle:获取计算后的样式,也叫当前样式.最终样式. 优点:可以获取元素的最终样式,包括浏览器的默认值,而不像style只能获取行间样式,所以更常用到.注意:不能获取复合样式如background属性值,只能获取单一样式如background-color等. alert (oAbc.currentStyle);IE8和Opera 11弹出了“object CSSStyleDeclaration”:FF 12.chrome 14.safari 5则弹出“

javascript 获取样式表里的属性值 currentStyle 和 getComputedStyle 的使用

很多时候我们要获取 CSS 样式表里面的值(非行间样式),而获取行间样式的属性值那么这用 obj.style.attr 就能获取得到,那么怎么样才能获取到CSS样式表里面的值呢,那么就要请出我们的主角 currentStyle 和 getComputedStyle ,简要的介绍一下他们,再封装一个函数来兼容各个浏览器. 介绍: currentStyle :这个属性是 IE 浏览器上使用的. getComputedStyle :这个方法是 搞基 浏览器上使用的. 封装: //这里的 obj 参数指

通过JavaScript设置样式和jQuey设置样式，还有随机数抛出水果的习题

一:通过JavaScript的方式设置样式(:拿习题为例): var shuiguo = document.getElementById('fruit');     shuiguo.style.backgroundColor = 'Red';                                                    //1     shuiguo.onclick = function () {     shuiguo.style.cssText = "backgrou

获取行间样式的方法

js的style属性可以获取html标签样式,但是不能获取行间样式,如果要获取行间样式,在IE下用currentStyle,在火狐下用getComputedStyle,特别注意一点,在IE下返回的是十六进制颜色’#ffffff’,在火狐下返回的是rgb(1,1,1)

修改行间样式属性不确定时“.”可以用“[ ]”代替

修改行间样式属性不确定时可以用“[ ]”代替 aBtn.onclick = function () { oBox.style[aText[0].value] = aText[1].value; }

js修改行间样式

样式优先级是 *(通配符)<标签<class<id<行间样式 其中行间样式的优先级最高哦 js中通过style属性来修改的样式,都是直接修改的行间样式,给了style的话再去修改classname就没有效果了 所以在修改样式表的过程中要么直接修改style要么修改class,不能混着来,否则样式表会出现混乱,行间事件会导致标签里面的内容 太乱不方便管理,所以编辑js的时候需要注意提取行间事件 当不给函数取名字的时候,可以使用匿名函数给js事件添加函数,比如oDiv.onclick

javascript 动态样式添加

异步加载css文件或者异步加载css模块,支持所有浏览器,包括IE,参考至javascript高级编程 1.createLink方法用于创建一个style标签并添加到head标签中 2.createModule方法用于创建一个style样式表的标签,并且如果在IE8以下的版本运行会抛出异常,在异常捕获模块中执行style.styleSheet.cssText兼容IE添加style的样式内容. <button id="demo">css文件</button> &l

Javascript操作样式

1.修改样式 修改元素的样式是className属性 class是Javascript的一个保留字,属性不能用关键字.保留字,所以就变成了className了. 修改元素的样式 this.style.backgroundColor="red"; obj.style.cssFloat="right"; 注意 (1)在css中的属性名在Javascript中操作的时候,属性名可能不一样,主要集中在那些属性名中含有-的属性,因为Javascript中-是不能做属性.类名的