js修改css样式

修改宽度：

document.getElementById("div1").style.width="200px";

修改border-radius:

document.getElementById("div1").style.borderRadius="100px";

修改背景图片：

document.getElementById("div1").style.backgroundImage=‘url(img.jpg)‘;

或者：

document.getElementById("div1").style.cssText="border-radius:100px; width: 200px; background-image: url(img.jpg)";

注意：

1：用style.属性名="属性值" 的时候属性名可能要改变一下，比如border-radius要变为borderRadius；background-image要变为backgroundImage；

　　但是用style.cssText的时候里面属性名的写法和css的写法相同。

2：两种方法最好不要混用，当用style.cssText设置之后，写在这句代码之前的style.width等等将会失效。

CSS参考手册：http://www.ziqiangxuetang.com/cssref/css-reference.html

　　　　　　　http://www.w3school.com.cn/h.asp

时间： 2024-10-26 02:25:37

js修改css样式的相关文章

关于修改css样式的几种js用法

看了js也有一段时间了,对于修改css样式有很多种方式可以实现,今天做一个小小的总结吧. 首先写个例子 body部分 <div class="box"></div><inpiut id-"btn" type="button" value="按钮"> style部分 .box{ width: 100px; height: 100px; background: red; border: 1px

用JS查看修改CSS样式（cssText,attribute('style'),currentStyle,getComputedStyle）

CSS样式定义方法大家都知道,在为HTML设置样式的时候,通常有三种方法:内联样式,内部样式表,外部样式表. 1.内联样式: 内联样式表就是在HTML元素中的行内直接添加style属性. 1 <div id="div1" style="width: 100px; height: 100px; background: black"> 2 </div> 2.内部.外部样式表: 内部样式表就是在<head>头部里有<style&

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. 解决办法:

javascript 修改css样式

abc.css CSS code .class1 { width:10px; background-color: red; } HTML code <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><link rel="stylesheet" type="text/css" href

jquery修改css样式，样式带!important

由于需求的需要,今天在用jquery修改一个弹出框的样式的时候,由于有一个按钮有padding-left:12px;导致内间距空出来的这一块颜色用普通的方式无法改变. 普通的jquery修改css的方法:$("#idName").css("backgroundColor","red");但是这个方法无法改变padding-left:12px;这一块的背景色,因为定位不到它的id. 后来在请教了公司的搞html的同事(民庆)后,他说要在样式后面加个

js获取css样式方法

一.CSS样式共有三种:内联样式(行间样式).内部样式.外部样式(链接式和导入式) <div id="a" style="width: 100px;height: 100px;"></div> <style type="text/css"> #a{ width: 100px; height: 100px; } </style> <body> <div id="a"

js 修改css文件

在做自動换肤设置时,无意中看到了js修改css的方法,感觉挺有用的,特来学习分享一下.好了,下面开始学习: js的 document.styleSheets 获取到的是引入的css的对象数组.如: 其中 CSSStyleSheet展开如下: document.styleSheets[0] 即可得到你所应用的第一个css rules 和 cssRules 的计数方法是不一样的!rules 是第几个选择器:cssRules 是第几条规则 document.styleSheets[0].cssRul

js 获取css 样式

style只能获取元素的行间样式. 原生代码获取css里的样式,currentStyle只适用于IE,getComputedStyle适用于FF.opera.safari.chrome. function getStyle ( obj, attr ) { return obj.currentStyle?obj.currentStyle[attr] : getComputedStyle( obj )[attr]; } js 获取css 样式

js获取、修改CSS样式

CSS样式分为三种,行内样式.内部样式.外部样式. 一.element.style.stylename 创建.获取.修改行内样式 console.log(document.getElementById("testcss0").style.backgroundColor);//"" document.getElementById("testcss0").style.backgroundColor = "black&quo