cssText在js中写样式表兼容全部

oDiv.style.cssText="width:100px;height:200px;";是前面的升级版（oDiv.style.width=‘200px’;）


<style>

div { width:100px; height:100px; border:1px solid #333; }

</style>

 

</head>

 

<body>

 

<div id="div1">123</div>

 

<input id="btn1" type="button" value="按钮" />

 

<script>

var oDiv = document.getElementById(‘div1‘);

var oBtn = document.getElementById(‘btn1‘);

 

oDiv.onclick = function (){

	// oDiv.style.width = ‘200px‘;

	oDiv.style.cssText = ‘ width:200px; height:200px; ‘;

//并不是要修改之前的css样式，而是这个是style.内嵌的，优先级更高点而已

};

oBtn.onclick = function (){

	// oDiv.style.width = ‘100px‘;

   //此时是是吧上面的oDiv.style.cssText = ‘ width:200px; height:200px; ‘;

//完全替换了，类似理解innerHTML一样。

	oDiv.style.cssText = ‘‘;

};再次清空的时候不会改变css里面的样式

 

</script>

时间： 2024-10-18 01:37:21

cssText在js中写样式表兼容全部的相关文章

关于JS动态切换样式表

最近在项目开发中发现一个很纠结的问题:jquery动态添加的节点无法正常渲染CSS样式,一番百度谷歌后,遍寻未果,后来我索性换一种思路,在前台中定义好CSS样式,然后在动态生成时控制CSS样式的开启和关闭,其实动态开启和关闭CSS样式就一句代码: document.styleSheets[i].disabled=true/false; document.styleSheets是页面中所有用<style></style>标签定义的样式个数,你可以通过document.styleShe

js中哈希表的几种用法总结

本篇文章只要是对js中哈希表的几种用法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助 1. <html> <head> <script type="text/javascript"> // by Go_Rush(脚本之家) from http://www.jb51.net/ var hash={ "百度" :"http://www.baidu.com/", "Google" :

JS 控制CSS样式表

JS控制CSS样式,首先得确定一点,CSS与HTML页面的链接方式,因为CSS有3种与HTML页面结合的方式,不同的方式也会产生不同的结果. 下面先记录一下JS控制CSS所使用的方法. 1.使用javascript更改某个css class的属性... 1 <style type="text/css"> 2 .orig { 3 display: none; 4 } 5 </style> 你想要改变把他的display属性由none改为inline. 解决办法:

微软BI 之SSIS 系列 - XML Task 中XSLT 样式表转换错误记录

开篇介绍此文章专门记录 XSLT 样式表转换过程中的语法问题错误一值与属性的倒置修改了几次样式表,但还是一如既往的报错,报错信息如下: [XML Task] Error: An error occurred with the following error message: "Attribute and namespace nodes cannot be added to the parent element after a text, comment, pi, or sub-eleme

JS中如何防止表单重复提交问题

在登录页面html中写如下代码 <script type="text/javascript"> var issubmit=false; function dosubmit(){ if(issubmit==false){ issubmit=true; return true; }else{ return false; } } </script> </head> <body> <form action="/Day07/Form

js读取CSS样式表样式

js中obj.style.height不能直接取css样式和嵌入的样式(style标签包起来的), 需要用 getComputedStyle 但IE又不支持,只能这样做: function getstyle(obj) { return window.getComputedStyle ? window.getComputedStyle(obj, null).height : obj.currentStyle.height; }

laravel项目中css样式表的背景图片不显示

刚学laravel,遇到了很多坑,感觉laravel是挺强大的. 建好后台项目,奈何css样式表的背景图片不显示 .mainhd { background: url(../images/sky/body_bg.png) repeat-x 0px 0px; } 按理上面的写法没错,因为是从别的后台搬过来的,但是图片一直不显示,访问绝对路径却又能显示图片,坑. 原因是因为图片路径要使用单引号或者双引号的,下面是正确的写法 .mainhd { background: url('../images/sk

JS中一些常用的兼容写法

1.滚动条到顶端的距离var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;2.滚动条到左端的距离var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;3.通过class属性获取页面元素对象的兼容function byClassName(obj,className){ if

JS：操作样式表 :addClass()和removeClass()

var box = document.getElementById("box"); box.id = "pox"; 将id = “box”,改为id = “pox”: 但id = “box”依然存在,这样就不符合W3C标准.不建议使用. box.className = "box5"; 将会把原来的className 清除只有一个类名为box5的类. 如果想有用className避免这种缺陷,可以写成 box.className ="bo