为什么已经给css样式添加了属性效果,检查元素的时候却什么都没有这是为什么呢

html-css021

为什么已经给css样式添加了属性效果,检查元素的时候却什么都没有这是为什么呢,第1张

80%css类名写错了,也就是class,而自己犯的错误,很难检查出来。

css引入错误,文件根本没有引入成功,

浏览器缓存,根本没有刷新出来,使用ctrl+F5

这个很简单呀。方法如下:

第一,你复制可以重复的class或id,然后查找。。找到一样的看有无属性冲突

第二,你看是这个css的哪种属性冲突,通过优先级来强制修改冲突的属性。。

把css找一遍,基本上能找到了。。

http://wanggou123.blog.163.com/blog/static/188430173201162111438652/

jquery获取对象的css属性值的时候,就算我们没有给这个对象设置过css属性值,这些值也会存在,只不过有些是默认值。下面我们来输出一个div的css属性值,原始代码如下

<!DOCTYPE html>

<html>

<head>

    <title>DIV_TEST</title>

    <meta charset="utf-8"/>

    <style type="text/css">

        #top1{

        }

    </style>

</head>

<body>

    <div id="top1">

        <u>你好我是某某某</u>

    </div>

<script src="jquery-3.2.1.min.js" ></script>

    <script>

        $(document).ready(function(){

            console.log("float的值是:"+$("#top1").css("float"))

            console.log("height的值是:"+$("#top1").css("height"))

            console.log("overflow的值是:"+$("#top1").css("overflow"))

            console.log("color的值是:"+$("#top1").css("color"))

            console.log("big的值是:"+$("#top1").css("big"))

        })

    </script>

</body>

</html>

结果如下

可以看到我们没有设置过div的css属性,除了高度以外剩下的只要存在这个css属性的都是默认值,唯一不同的是最后一个big属性,我们知道这个属性不是css的属性,因此我们判断有没有某个属性的时候可以通过这个方式判断

$(document).ready(function(){

    console.log("是否存在big属性:"+testHasCss($("#top1"),"big"))

    console.log("是否存在color属性:"+testHasCss($("#top1"),"color"))

    console.log("是否存在display属性:"+testHasCss($("#top1"),"display"))

    console.log("是否存在gogo属性:"+testHasCss($("#top1"),"gogo"))

})

var testHasCss = function(obj,cssStr){

    if((obj).css(cssStr) === undefined){

        return false

    }else{

        return true

    }

}

结果如下