jQuery 属性与样式（六）

通过JavaScript获取dom元素上的style属性，我们可以动态的给元素赋予样式属性。在jQuery中我们要动态的修改style属性我们只要使用css()方法就可以实现了

css() 方法：获取元素样式属性的计算值或者设置元素的CSS属性

获取：

css( propertyName ) ：获取匹配元素集合中的第一个元素的样式属性的计算值

css( propertyNames )：传递一组数组，返回一个对象结果

设置：

css(propertyName, value )：设置CSS

css( propertyName, function )：可以传入一个回调函数，返回取到对应的值进行处理

css( properties )：可以传一个对象，同时设置多个样式

注：

浏览器属性获取方式不同，在获取某些值的时候都jQuery采用统一的处理，比如颜色采用RBG，尺寸采用px

css()方法支持驼峰写法与大小写混搭的写法，内部做了容错的处理

当一个数只被作为值（value）的时候， jQuery会将其转换为一个字符串，并添在字符串的结尾处添加px，例如 .css("width",50}) 与 .css("width","50px"})一样

下面我们来看一段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>

    <script>
        $('div').css('color','red');
    </script>
</body>
</html>

改变div 中内容的样式

下面我们来看一下，如果改变多个样式呢，比如我要给div标签设置一个宽高，或者背景，那应该怎么写呢？

那接下来我们就开始写这样的一段代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>
<body>
    <div>php 中文网</div>
    
    <script>
        $("div").css({
            width:'200px',
            height:'200px',
            background:'#ccc'
        });
    </script>
</body>
</html>

看上面的代码，我们就可以吧ｄｉｖ　的宽高背景都设置成自己想要的样式了

注意：在我们写的时候，写完了一个属性需要用逗号结尾，写到最后一个的时候我们可以不加逗号的

Weiter lernen

neue Datei

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> </head> <body> <div>php 中文网</div> <script> $("div").css({ width:'200px', height:'200px', background:'#ccc' }); </script> </body> </html>

einreichen Code zurücksetzen

Automatische Operation

jQuery 属性与样式（六）

GrundschuleTutorial zur Imitation einer Imperial CMS-Unternehmenswebsite

GrundschuleNeulinge ohne WordPress-Grundkenntnisse erstellen persönliche Blogs und Unternehmenswebsites

GrundschuleUltimatives CMS-zertifiziertes Anleitungsvideo zum Erstellen von Websites

GrundschuleFront-End-Projekt-Shangyou [umfassende Praxis der HTML/CSS/JS-Technologie]

DazwischenliegendVue3.0 von 0 zum Aufbau einer universellen Backend-Managementsystem-Projektpraxis

GrundschuleNullbasierter Front-End-Kurs [Vue fortgeschrittenes Lernen und praktische Anwendung]

GrundschuleWEB-Frontend-Tutorial [HTML5+CSS3+JS]

GrundschuleKurze Einführung in Apipost

DazwischenliegendVue3 + TypeScript praktische Tutorial-Projektpraxis auf Unternehmensebene

GrundschuleLassen Sie uns kurz über die Gründung eines Unternehmens in PHP sprechen

DazwischenliegendVUE E-Commerce-Projekt (Front-End- und Back-End-Doppelprojekt, tatsächlicher Kampf)

GrundschulePraktische Anwendung von Apipost [API, Schnittstelle, automatisiertes Testen, Mock]