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
}
}
结果如下
一共有三种 形式存在第一种为标签样式,taglib为标签名,后面{}里面加属性,这种样式对页面内所有的标签名为taglibname的标签起作用。
第二种为css类样式,需要在HTML开始标签 后缀 class="name",name即类名,这类标签对HTML内所有后缀同样name的标签起作用 class="name" 可以设在多个开始标签后,表示这些标签具有同一类样式。
第三种为cssID样式,需要在HTML开始标签后缀 id="id",需要注意的是,ID样式的话,每一个name都是独立且不重复的,具有唯一性。
希望我的回答对你有帮助
默认情况li前面是有点的,可以通过对li设置list-style-type:none将点取消
如下例子:
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
li{list-style-type:none}
</style>
</head>
<body>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</body>
</html>