<html lang="en">
<head>
<!--声明当前页面的编码集:charset=gbk,gb2312(中文编码),utf-8国际编码-->
<meta http-equiv=$strIndex{1} content=$strIndex{2}>
<meta name="Keywords" content="关键词,关键词">
<meta name="Description" content="">
<title></title>
<style type="text/css" id="style">
*{padding:0;margin:0;}
#box{width:100px;height:100px;background:#000;color:#fff;text-align:center;}
.jc{border-radius:10px;line-height:100px;font-weight:bold;}
</style>
</head>
<body>
<div id="box">123</div>
<script type="text/javascript">
//找到盒子对象
var oBox = document.getElementById("box");
var oStyle = document.getElementById("style");
//oBox.onclick = function(){
// oStyle.innerHTML += "#box{background:yellow;}";
//}
//当写多个样式的时候可以采用cssText
//oBox.style.background = "blue";
//oBox.style.border = "10px solid pink";
//oBox.style.width = "200px";
//oBox.style.cssText = "background:yellow;color:green;border:10px solid red;margin-left:10px;$keywordIndex{3}:right";当要添加的css较多时候使用cssText属性对添加的样式一起添加
在js中添加符合属性时要去掉“-”,并且将符合属性的第一个单词大写,否则则是错误的
例如:
oBox.style.paddingLeft = "54px"; 正确
//oBox.style.padding-left = "54px"; 错误
//浮动 cssFloat时候其他浏览器,在IE6,7,8不支持,采用styleFloat
//oBox.style.cssFloat = "right";
//oBox.style.styleFloat = "right"; 兼容写法
</script>
</body>
</html
例题:
<div id="box" class="b">
</div>
var obox=document.gerElementById("box");
var bdom=document.gerElementsClassName("b");
根据id获取是静态方法,根据class获取的是动态方法
1.代码第二句是否还能执行已更改id名的背景颜色?
obox.id="oboxxxxx"
obox.style.background="yellow";
答案:可以
解析:虽然代码第一句已更改了obox的id名但是obox指向已保留到了内存中并且id名是唯一的不可从复的不存在重复的现象而且id获取是静态方法,以至obox.style.background还可以继续执行!
2.代码第二句是否还能执行已更改id名的背景颜色?
bdom.classname="bbbbb"
bdom.style.background="yellow";
答案:不可以
解析:虽然通过第一句找到了classname名但是由于calssname是可以重复的而且class获取的是动态方法,所以拿到的是一个数组集当执行到第二句的时候找到的bdom无法确定是具体的哪一个,从而又从顶部开始查询此时通过第一句js代码classname名已改变,从而找不到classname名为bdom的元素导致第二句无法执行!
解决方法:在第二句中的bdom以及获取classname后面加入[x],指定是具体的哪一个bdom
如下:
var bdom=document.gerElementsClassName("b")[0];
bdom[0].style.background="yellow";
[ ]的讲解
在js代码中某一个属性要使用,但是不确定具体是什么属性的情况下,我们通常把它定义成一个变量,同时配合[ ]去使用。js代码中大部分用 . 描述的都可以用[ ]代替!
记住:[ ]里面的内容都是字符串!
例如:不清楚你传入的是宽度还是边框等属性,就可以采取【】!(了解例子,以后就懂了)
function setStyle(attr,value){
oBox.style[attr] = value;
}
setStyle("border","10px solid #000");
setStyle("width","200px");
例题:
var oBox = document.getElementById("box");var attr = "width";
oBox.onclick = function(){
this.style[attr] = "200px";
}
例如
function set(key,value){
oBox.style[key] = value;
};
set("border","10px solid red");
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
根据需求添加样式
var oBox = document.getElementById("box");
.jc{width:500;height:500px;background:yellow;}
例如:
obox.onmousever=function(){
this.className += "jc"---------为obox添加classname名为.jc的样式
|
在js中class为关键字,所以要改为className
};
如何用js操作节点标签属性
<div id="box" class="b" style="color:red;" >
<p class="p"></p>
</div>
1:
var obox=document.getElementById("box");
alert(obox.document.getElementsClassName("p"))
拿到id名为obox的div下面class名为p的节点标签
2:
合法标签属性-------》对象,属性
alert(obox.Id+"===="+obox.className+"===="+obox.style);
自定义标签
<div id="box" class="b" kery="xxx"---(自定义属性)>
</div>
获得自定义属性的值的方法
obox.kery="xx"
getAttribute(key,value);
||
用法:getAttribute("kery","xxxx");更改名为kery的样式
alert(obox.getAttribute("kery"));
xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
运算符的讲解
算数运算符 + - * / % ++ -- (运算优先级 (++a与a++的区别是什么?) )
赋值运算符 = += -= *= /= %=
比较运算符 < > <= >= != (== 与 === 的区别是什么?)
逻辑运算符 &&(短路) || ! (& 与 && 的区别是什么?)
条件运算符 ( * )? * : * (三目运算符的好处是什么?)
移位运算符 & | ^ ~ << >> (熟悉简单的按位计算)
a++与++a区别:
文章最后面试经典题说明
注意!== 和===判别更加严格,不仅值相同,而且数据类型相同
==是松散相等于
===严格相等于
var a = 10;
var b = "10";
if(a==b){
alert("等于");
}else{
alert("不等于");
}
逻辑运算符
& 与 && 的区别是什么
&&--->y=0 &---->y=1
if(10<3 && ++y>0){
alert("1");
}else{
alert("2");
}
alert(y);如果是&&在if里面执行判断时判断到第一个不成立时即(10<3)则不会继续判断即( ++y>0)的真假,直接执行if下面函数,而&则与之相反.
条件运算符之三目运算符
if(10>4){
alert("正确");
}else{
alert("不正确");
}
三目运算符用法:(10<4)?alert("正确"):alert("不正确");
经典面试题
alert(a++);//a = 10 解析:a++是先打印a=10在把a+1执行则a=11
alert(++a);//a = 12 ++a则先将11+1再把a=12打印出来