js 改变style

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js 改变style相关的知识,希望对你有一定的参考价值。

javascript里面写html的style怎么写哦~
很多都不一样~~
比如border写成
XX.style.border= "1px";
没效果呀~~难道写错咯`~

CSS中的BORDER属性的格式: 边框大小 样式 颜色
如:
obj.style.border="1px solid #000";
1px: 边框大小
solid: 样式(实线)
#000: 颜色(黑色, 相当于#000000)
下面是一个例子:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="lly365(lly365@gmail.com)">

<script type="text/javascript">
<!--

function textcolor()

document.getElementById('lly').style.color='red';

function _border()

document.getElementById('lly').style.border='1px solid #000';

-->
</script>

</HEAD>

<BODY>
<div id="lly">
请点击下面的按钮进行操作...<br />
有问题,请联系: lly365@gmail.com
</div>
<input type="button" onclick="textcolor()" value="改变文字颜色" />

<input type="button" onclick="_border()" value="加上边框" />

</BODY>
</HTML>
参考技术A 用这种方法:
<style type="text/css">
.class1border:1px solid #cccccc;
.class2border:2px solid #0066cc;
</style>
<div class="class1" onmouseover="this.className='class2'" onmouseout="this.className='class1'">
.....我是内容
</div>

如何用js实现,点击后,改变一个css

方法步骤:

    先获取要改变css的元素。

    改变这个元素的style属性。

    eg:下面是改变div的背景色,改为蓝色。

    <style>

    divwidth:200px;height:200px;background:#f00;

    </style>

    <div>改变背景色</div>

    <script>

    var div = document.getElementsByTagName("div");

    div.style.background = "blue";

    </script>


参考技术A 有三种方法:直接改变样式、改变className和改变cssText

改变className: document.getElementById('obj').className="…"

改变cssText:document.getElementById('obj').style.cssText="width:20px; border:solid 1px #f00;";

改变直接样式: document.getElementById('obj').style.backgroundColor="#003366″
参考技术B <style>.color1color:red;.color2color:black;</style>

<script type="text/javascript" src="/jquery-1.9.1.min.js"></script>
<div id="change" class="color1">我现在是红色</div>
<a href="#" onclick="change();"/>点击我会把文字变成黑色</a>

<script>
function change()   
    $("#change").attr("color1","color2");//改变class    

</script>

参考技术C 你只要把超链接鼠标经过属性的颜色改下就可以实现了 参考技术D js改变 class 就ok了

以上是关于js 改变style的主要内容,如果未能解决你的问题,请参考以下文章

js中.style.background无法改变背景颜色

用JS改变的元素CSS样式

用JS改变的元素CSS样式

js动态改变样式属性(style属性)

跪求JS动态改变层的style.left属性使其水平移动的例子

js改变backgroundImage??