2. css中定义的样式。在引用的class里可以跳转到对应的css定义处,包括HTML中同文件内部跳转及HTML向css文件的跳转。但目前还不支持选择器里.class写法的跳转。
3. HTML中定义的元素id。在js里使用document.getElementById("div1"),这里的div1也是可以跳转的。但目前还不支持#id写法的跳转。
4. 文件跳转。在HTML、js、css、图片、多媒体音视频等文件被引用等地方,可以直接跳转打开该文件。
几个注意:
1. 使用alt而不使用ctrl,一是因为ctrl+鼠标左键是多光标和选相同词,有冲突,二来HBuilder的快捷键体系定义里,alt代表跳转。
2. 文件要有引用关系才能跳转,比如HTML里引用了css文件或js文件,才能从HTML里跳转到css或js文件里
obj.style方法,这个方法只能JS只能获取写在html标签中的写在style属性中的值(style=”…”),看下面代码XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/htmlcharset=utf-8″ />
<title>JS获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{color:#cdcdcd}
–>
</style>
</head>
<body>
<div id=”css88″ class=”ss” style=”width:200pxheight:200pxbackground:#333333″>JS获取CSS属性值</div>
<script type=”text/javascript”>
alert(document.getElementById(“css88”).style.width)//200px
alert(document.getElementById(“css88”).style.color)//空白
</script>
</body>
</html>
上面这个例子对id为”css88″的div设置了2种烦事的样式,包括style和外部样式class。
从alert出来的信息可以看到,document.getElementById(“css88”).style方法获取不到class为ss的属性和值。
IE中使用的是obj.currentStyle方法,而FF是用的是getComputedStyle 方法。
另外一个方法是:
XML/HTML代码
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
<html xmlns=”http://www.w3.org/1999/xhtml“>
<head>
<meta http-equiv=”Content-Type” content=”text/htmlcharset=utf-8″ />
<title>S获取CSS属性值</title>
<style type=”text/css”>
<!–
.ss{background:bluecolor:#cdcdcdwidth:200px}
–>
</style>
</head>
<body>
<p id=”qq” class=”ss” >sdf</p>
<script type=”text/javascript”>
function GetCurrentStyle (obj, prop) {
if (obj.currentStyle) {
return obj.currentStyle[prop]
}
else if (window.getComputedStyle) {
propprop = prop.replace (/([A-Z])/g, “-$1”)
propprop = prop.toLowerCase ()
return document.defaultView.getComputedStyle (obj,null)[prop]
}
return null
}
var dd=document.getElementById(“qq”)
alert(GetCurrentStyle(dd,”width”))
</script>
</body>
</html>
当然,如果您是引用外部的css文件同样适用。
另:可以将上面的方法简化为
JavaScript代码
function getDefaultStyle(obj,attribute){ // 返回最终样式函数,兼容IE和DOM,设置参数:元素对象、样式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute]
}
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
}
}
结果如下