jQuery获取设置样式

html-css010

jQuery获取设置样式,第1张

css()方法

获取或设置样式

对以下html标签进行样式的获取和设置

css()方法设置参数,参数为要设置的样式名

可用驼峰命名也可用css命名方式。注意样式名需要加''

点击获取按钮,结果:

但是在IE浏览器里,用 console.log($('#div1').css('border'))可能会不显示或出现undefined。

在IE浏览器中,要获取边框这样的样式值,一定要记得给一个准确的边框值。例如:

console.log($('#div1').css('Border-top-width'))//2px

获取包含了多个DOM元素的jQuery对象的样式,只能获取到第一个DOM对象的样式。例如:

console.log($('div').css('width'))//200px

css(样式名,样式值)

设置的样式是行内样式

单样式里样式名必须在''里,宽高度单位px可不写,这时300可不加'',如果加px,则必须为'300px'

多样式里样式名可不加''。但是 background-color:'green' 这样写报错。

给多个div一起设置样式

隐式迭代,把每一个div都设置了同样的样式

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <link rel="stylesheet" href="jqhover.css"><!--这里显示外链式样式-->

    <!--<style>这里显示是内嵌式样式,两种方式都可以在下面的jq代码中获取到背景定位的值

        a{ background-position: 0px 0px}

        a:hover{ background-position: 120px -20px}

    </style>-->

    <script src="jquery-1.8.0.min.js"></script><!--这里引入jq库,你在使用的时候记住修改路径-->

    <script>

    $(function(){

        var bgPosition = $('a')

        bgPosition.hover(function(){

            alert($(this).css('background-position'))

        },function(){

            alert('ok')

        })

    })

    </script>

</head>

<body>

    <a href="#">1111111111111</a>

</body>

</html>