js如何更改css样式，

JS可以使用css属性来进行样式修改，并且不仅可以修改单一属性，也可以同时修改多个属性。

案例

以下小案例使用JQuery作为演示。

前提： html页面首先必须引入JQuery，放置在body体最后的位置。例如：

<script type="text/javascript" src=";

html部分代码

<p>

    我是一个段落，我没有背景颜色的，但是JQuery会给我增加背景颜色。

</p>

<button>

点击我，给上面段落添加**背景颜色。

</button>

JQuery代码

 $("button")click(function(){

        $("p")css("background-color", "yellow");

 });

修改多个属性

$("button")click(function(){

        $("p")css({"background-color": "yellow", "font-size": "200%"});

 });结论与解释：

首先使用Jquery选择器进行元素选择 - $("button")

为该元素绑定点击事件 - click

click中的匿名函数修改css属性。

在css属性的修改中，p段落有了**背景； 多个属性修改，不但有了**背景而且字体是之前的两倍大小。

注意事项：

可以不用非要绑定事件，在本案例中，绑定事件是为了更好地演示Jquery如何 *** 作css属性。

修改单一属性和多个属性的写法是有区别的，多个属性使用{},属性与值之间用：分割，属性与属性之间用，分割。

<link href="css/color1css" id="color" rel="stylesheet" type="text/css" /><!--注意这行的id-->

<a onclick="changeStyle(1)">样式1</a>

<a onclick="changeStyle(2)">样式2</a>

上面是html，下面是js把选定的样式加载进cookies ,网页加载先查cookie。

function getObject(elementId) { //获取指定id的object 

if (documentgetElementByIdx) {  return documentgetElementByIdx(elementId); } 

else if (documentall) {  return documentall[elementId]; } 

else if (documentlayers) {  return documentlayers[elementId]; }

}

function changeStyle(id){//切换样式 

var stylesheet=getObject("color")href="css/color"+id+"css"; 

documentcookie="stylesheet="+escape(stylesheet);//写入Cookie 

//alert(documentcookie); 

//alert(stylesheet);

}

function initStyle(){ //初始化样式，如果cookie存在样式，则加载cookie样式，否则加载默认样式  

if(/stylesheet=([^;]+)/test(documentcookie))//判断是否存在cookie   

getObject("color")href=unescape(RegExp$1);   

//alert(/stylesheet=([^;]+)/test(documentcookie));

}initStyle();

可以参考下面的代码：

<style>

a{display:block;float:left}

</style>

<div style="border:1px solid #cccccc">

<a id="a1" href="#" class="float_r" style="margin-top:10px;">asd</a>

<a id="a2" href="#" class="float_r" style="margin-top:20px;">asd</a>

<a id="a3" href="#" class="float_r" style="margin-top:30px;">asd</a>

<a id="a4" href="#" class="float_r" style="margin-top:40px;">asd</a>

<a id="a5" href="#" class="float_r" style="margin-top:50px;">asd</a>

</div>

<script>

for(var i=1;i<6;i++){

  documentgetElementById('a'+i)stylemarginTop = parseInt(documentgetElementById('a'+i)stylemarginTop)+5+'px';

}

</script>

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。

通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。它最初由Netscape的Brendan Eich设计。JavaScript是甲骨文公司的注册商标。Ecma国际以JavaScript为基础制定了ECMAScript标准。

扩展资料：

javaScript参考函数

anchor("name")用来把字符串转换为HTML锚面标志内(<A NAME=>)

big() 把字符串中的文本变成大字体(<BIG>)

blink() 把字符串中的文本变成闪耀字体(<BLINK>)

bold() 把字符串中的文本变成乌字体(<B>)

fixed() 把字符串中的文本变成流动间距字体,便电报情势(<TT>)

fontcolor(color)设置字符串中文本的色彩(<FONT COLOR=>)

Fontsize(size) 把字符串中的文本变成指定大小(<FONTSIZE=>)

italics() 把字符串中的白原变成斜字体(<I>)

Link(url)用来把字符串转换-HTML链交标志中(<A HREF=>)

参考资料来源：百度百科-javascript

用js如何获取div中css的

margin、padding、height、border等。你可能说可以直接用documentgetElementById("id")stylemargin获取。但是你说的只能获取直接在标签中写的style的属性，无法获取标签style外的属性（如css文件中的属性)。而下面方法则两者值都可以获取。

实例效果图如下:

js在获取css属性时如果标签中无style则无法直接获取css中的属性，所以需要一个方法可以做到这点。

getStyle(obj,attr)

调用方法说明：obj为对像,attr为属性名必须兼容js中的写法(可以参考：JS可以控制样式的名称写法)。

Js代码

复制代码

代码如下:

function

getStyle(obj,attr){

var

ie

=

!+"\v1";//简单判断ie6~8

if(attr=="backgroundPosition"){//IE6~8不兼容backgroundPosition写法，识别backgroundPositionX/Y

if(ie){

return

objcurrentStylebackgroundPositionX

+"

"+objcurrentStylebackgroundPositionY;

}

}

if(objcurrentStyle){

return

objcurrentStyle[attr];

}

else{

return

documentdefaultViewgetComputedStyle(obj,null)[attr];

}

}

先给DIV加上ID

<script>

function gettext()

{

var text=documentgetElementById("IdName")innerHTML //提取DIV中的内容

if(text=="赞")

{

documentgetElementById("idName")className="NewName" //更换新样式名

}

else{

documentgetElementById("idName")className="NewName"

}

}

</script>

大概结构就这样吧！有空多看看JS是对DIV进行控制的一些方法

以上就是关于js如何更改css样式，全部的内容，包括:js如何更改css样式，、如何用js改变多个框架的css，也就是让网页整体换肤、js获取css属性，更改margin-top属性，给每个a标签的margin-top属性在原基础上 +5px等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！