JS中style属性

JS中style属性
现在我需要对这个标签赋值,其内容为: 
1、需要显示的字为“HELLO WORLD”; 
2、span的 background-color : red ,另外还要:border:1px solid #333333;cursor:hand; 
我需要在<script></script>内把他们赋值,请问怎么写呢?难道要: 
document.getElementById("a").style.background="red"; 来一项一项的写? 
能不能一下子把style写完啊,怎么写啊? 
解决办法:
1、先定义一个CSS规则,然后this.className=‘‘
2、document.getElementById("a").style.cssText="border-collapse:collapse;border-spacing:1;border:1 solid #0B2565;color:black;"

JS操作css的float属性的特殊写法
使用js操作css属性的写法是有一定的规律的:

1、对于没有中划线的css属性一般直接使用style.属性名即可。
如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position等。

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

这个规律我想大多数的前端开发者也都熟知。但在css中有一个特殊的属性其js使用方法比较特殊。
这个特殊的属性就是:float。我们不能直接使用obj.style.float来使用,这样操作是无效的。

其正确的使用方法是为:IE:obj.style.styleFloat,其他浏览器:obj.style.cssFloat。

注:style不论添加样式,还是获取样式,都是对行间样式的操作。

时间: 2024-12-28 13:03:51

JS中style属性的相关文章

js中style,currentStyle和getComputedStyle的区别

js中style,currentStyle和getComputedStyle的区别 MarysMa 在js中用xx.style.marginTop是无法获取写在css或<sytle>标签中的margin-top之类的样式值(包括width,height等). 这就是style属性的限制: style :只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.(内联样式: body中标签里用style直接写的样式.) currentStyle :可以弥补style的不足,但是只适用

js中style.display=&quot;&quot;无效的解决方法

本文实例讲述了js中style.display=""无效的解决方法.分享给大家供大家参考.具体解决方法如下: 一.问题描述: 在js中我们有时想动态的控制一个div显示或隐藏或更多的操作,但如果我们style.display=""可能导致没有效果. 看下面一段代码: 复制代码代码如下: <style> #name {     display:none; }</style></head><body><div id=

js中style的属性

下面这些属性都是通过js的style来设置css.只是整理了一部分,详细的可以参考相应的学习网站,不好的地方欢迎大家拍砖. alignContent :"" 属性在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项(垂直) alignItems :"" align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式 alignSelf :"" align-self 属性定义flex子项单独在侧轴(纵

js中元素属性值的获取

一.样式表的三种方式 1.内嵌样式(inline style):是写在tag标签当中的,用style=“”来表示,只对当前标签生效: 2.内部样式(inner style sheet):是写在HTML中的,一般写在head标签中,对所在的网页有效 3.外部样式表(Extend style sheet):写在单独文件,需要用link标签单独引入,可对多个网页生效 二.获取style样式属性 1.在js中,通过document.getElementById("id").style.xxx就

JS中style.display和style.visibility的区别

在JS中可以通过设置style.display或者style.visibility属性来控制元素是否显示,在style.display=block和style.visibility=visible的时候,元素被显示,在style.display=none和style.visibility=hidden的时候,元素被隐藏.它们之间最大的区别是通过style.display=none隐藏的时候,元素不占据原来的位置,从文档流中脱离,后续的元素填补其位置.通过style.visibility=hidd

js中style,currentStyle和getComputedStyle的区别以及获取css操作方法

一.style,currentStyle和getComputedStyle的区别 <script>  function getStyle(obj, attr)   {       if(obj.currentStyle)       {          return obj.currentStyle[attr];  //只适用于IE     }       else       {          return getComputedStyle(obj,false)[attr];   //

CSS属性与js中style对象的属性对应表

CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft border-left-c

CSS和JS标签style属性对照表

盒子标签和属性对照 CSS语法(不区分大小写) JavaScript语法(区分大小写) border border border-bottom borderBottom border-bottom-color borderBottomColor border-bottom-style borderBottomStyle border-bottom-width borderBottomWidth border-color borderColor border-left borderLeft bor

js中常用属性备忘

. onsubmit一般用来做验证的,用来控制表单提交的. 之前使用数据提交基本上使用ajax做数据提交,在数据验证的时候,只有通过数据验证之后,才会post/get数据到对应api文件,但是这次涉及图片上传,只能使用form表单提交,但是这前台js判断的时候出现问题.就是在js验证之后,form表单自动提交. 如何防止表单自动提交? <form name="form1" onsubmit="return check()" method="post&