`
cuixuxucui
  • 浏览: 346043 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

JS 中的 style.width[转]

    博客分类:
  • JS
阅读更多

http://www.cftea.com/c/2006/12/BFLZYKFAY1RZXDDQ.asp

作者:chilleen 来源:千一网络(原创) 时间:2006-12-12

JS 中也可以控制样式表,但 IE 和 FF(FireFix) 对此解释略有不同,以 style.width 为例。

IE
id.style.width = "100"; //只带数值,不会出错
id.style.width = "100px"; //带数值和单位,不会出错
id.style.width = "100px;"; //带数值、单位和分号,会出错

FF
id.style.width = "100"; //只带数值,会出错
id.style.width = "100px"; //带数值和单位,不会出错
id.style.width = "100px;"; //带数值、单位和分号,不会出错

由此可见,要写出兼容的代码,就得选用“带数值和单位”的写法,上例中为:id.style.width = "100px";

取值
  上面是给 style.width 赋值,若取值的话,不论哪种写法,只要在各自浏览器中能够运行,返回值均是:数值和单位的形式,如:100px。

pixelWidth
  如前所述,id.style.width 返回 100px 的形式,IE 支持 pixelWidth,它返回只有数字,不带单位。但 FF 不支持,所以我们取 width 的宽度数值时还是这样用:var w = parseInt(id.style.width),parseInt 将字符串转化成整数。

分享到:
评论

相关推荐

    基于js中style.width与offsetWidth的区别(详解).docx

    基于js中style.width与offsetWidth的区别(详解).docx

    基于js中style.width与offsetWidth的区别(详解)

    作为一个初学者,经常会遇到在获取某一元素的宽度(高度、top值…)时,到底是用 style.width还是offsetWidth的疑惑。 1. 当样式写在行内的时候,如 ”box” xss=removed>时,用 style.width或者offsetWidth都可以...

    可以实现图片放大的js代码

    能过实现图片放大的js源码,部分代码: remove : function(img) { if(img&&typeof(img.ctrlid)==="string") {var ele,obj=img.parentNode; img.onmousedown=null; document.onmousemove=null; document....

    JavaScript+div 半透明弹出层

    newDiv.style.width = "500px"; newDiv.style.height = "300px"; newDiv.style.top = "50px"; //newDiv.style.left = (parseInt(document.body.scrollWidth) - 300) / 2 + "px"; // 屏幕居中 newDiv.style....

    显示div层js.txt

    divBackground.style.width = document.documentElement.clientWidth; //层的宽度 divBackground.style.height = document.documentElement.clientHeight; //层的高度 divBackground.style.position = ...

    javascript下操作css的float属性的特殊写法

    使用js操作css属性的写法是有一定的规律的: 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。 2、对于含有中划线的...

    CSS40个布局实例

    加强对CSS布局的了解。部分代码: </style> <script type="text/... $("intro").style.width=w+"px"; $("details").style.width=w+"px"; } } function $(id){ return(document.getElementById(id));} </script>

    淘宝大图轮播

    淘宝旺铺大图轮播代码<style type="text/css"> ...<script type="text/javascript">$E({berviary:"currentPic1",expand:{id:"expand",style:{}},clip:{width:"50px",height:"50px"},opacity:"0.2"});</script>

    js调用css属性写法

    1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.... 因为float是Javascript的保留字,那怎么在js中书写样式表中的float呢? 我们不能直接使用obj.styl

    连续操作HTMLElement对象图文解决方法

    this.style.width=510;}”>510){this.resized=true;this.style.width=510;}”>510){this.resized=true;this.style.width=510;}”> 510){this.resized=true;this.style.width=510;}”>510){this.resized=true;this....

    图像70周年代码.zip

    <script src="./js/fabric.js"> var cvs = document.getElementById("cvs"); var ctx = cvs.getContext("2d"); var exportImage = document.getElementById("export"); var img = document.getElementById...

    详解Javascript动态操作CSS

    如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如:obj.style.marginTop,obj.style....

    鼠标放上去显示层及信息详情.

    zoomImg.parentNode.style.width = srcImg.width; zoomImg.parentNode.style.height = srcImg.height; function zoom(){ hidd.style.display=""; var elm = event.srcElement; h = elm.offsetHeight/zoomRate/2...

    各种 javascript 弹出层 div

    javascript 弹出层 function show(id,ev){/*--打开--*/ closeWindow(); var bWidth=parseInt(document.documentElement.scrollWidth); var bHeight=parseInt(document.documentElement.scrollHeight)(document....

    webgl.js:JavaScript WebGL库

    webgl.js 以与DOM相同的方式处理WebGL。 用法 <!doctype html > < html > < head > ... </ head > < body > < canvas> < script src =" webgl.js " > </ script > ...

    仿淘宝js放大镜效果

    仿淘宝js放大镜效果 核心代码 malmg.onmouseover = function(){ showimg.style.display = "block"; bigimg.style.display = "inline"; show_half = showimg.offsetHeight/2; maxWidth = smalmg.clientWidth - ...

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

    用js动态添加html元素,以及属性的...lswt_2.style.width='11px'; lswt_2.style.height='10px'; lswt_2.style.top='0px'; lswt_2.style.right='0px'; lswt_2.style.position='absolute'; lswt_2.style.background='url

    抽奖轮播实现的,html,js.zip

    luck.style.left=-zuobi*img_width+"%"; zuobi2_sp.innerHTML=sp[zuobi].innerHTML+(parseInt(zuobi)+1); zuobi=-1; }else{ clearInterval(timer); zuobi2_sp.innerHTML=sp[index].innerHTML+(index+1); }

    js动态调用css属性的小规律及实例说明

    如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。 2、对于含有中划线的css属性,将每个中划线去掉并将每个中划线后的第一个字符换成大写即可。 如:obj.style.marginTop,obj.style....

Global site tag (gtag.js) - Google Analytics