jq鼠标经过div变大？鼠标滑过div里的内容变样式
一、使用js或jq,设置div的显示和隐藏
Javascript:
网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth(包括边线的宽)
网页可见区域高： document.body.offsetHeight(包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft
网页正文部分上： window.screenTop
网页正文部分左： window.screenLeft
屏幕分辨率的高： window.screen.height
屏幕分辨率的宽： window.screen.width
屏幕可用工作区高度： window.screen.availHeight
屏幕可用工作区宽度： window.screen.availWidth
JQuery:
$(document).ready(function(){
alert($(window).height());//浏览器当前窗口可视区域高度
alert($(document).height());//浏览器当前窗口文档的高度
alert($(document.body).height());//浏览器当前窗口文档body的高度
alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin
alert($(window).width());//浏览器当前窗口可视区域宽度
alert($(document).width());//浏览器当前窗口文档对象宽度
alert($(document.body).width());//浏览器当前窗口文档body的宽度
alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin
})
这些数据可提供查考,具体取高度的话你可以测试下，我也有点不记得了，下面H高度就是2个选择2个高度相减一下就可以了，写法我给你看看。
实际判断代码如下：
<script type="text/javascript">
$(document).ready(function(){
var H=大的高度-窗体的高度
if(H>$("#xianshi").attr("height")){
$("#xianshi").show();
}else{
$("#xianshi").hide();
}
});
</script>
二、css***div***html***鼠标滑过div里的内容变样式
1、先在找个文件夹创建文件index.html。
2、然后用能编辑文本文件的软件打开index.html，index.html的初始内容如图。
3、接着编写两个样式作为鼠标移动时div修改的样式。
4、然后编写js代码修改div的样式。
5、编辑完index.html后保存，在浏览器中打开index.html。效果如图。鼠标移入移出div时，div的样式改变。
6、如果想div能改变多个样式。可如图修改index.html文件。
三、怎么用js(不是JQ)给标签外加一个div标签
/**
*给定标签添加外标签
*@param{object| string} obj一个标签元素，或者元素的id值
*@param{string} tag外标签的名称，可以带上id值class值
*/
function setParent(obj,tag){
obj= typeof obj==="string"? document.getElementById(obj): obj;
//判断obj是否为有效元素对象
if(obj&& obj.nodeType){
if(obj.nodeType!== 1){
alert("无效的元素对象！");
return false;
}
}else{
alert("无效的元素对象！");
return false;
}
//如果没有设置tag，或者省略了标签名称，则默认为div
tag= tag?(/^(#|\.)/gim.test(tag)?("div"+tag): tag):"div";
var id="",
cname="",
len= tag.length,
i= 0,
tn="",
isT= true,
str="",
relTag="";//用来保存标签
//获取id值，获取class值,这一部分参考zencoding的写法
while(i<len){
str= tag.charAt(i);
switch(str){
case"#"://id
id= tag.substring(i+1).match(/^[\w\-:\$]+/i);
id= id? id[0]:"";
i+= id.length+ 1;
isT= false;
break;
case"."://class
tn= tag.substring(i+1).match(/^[\w\-:\$]+/i);
tn= tn? tn[0]:"";
i+= tn.length+ 1;
cname+=""+ tn;
isT= false;
break;
default:
if(isT){
relTag+= str;
}
i++;
}
}
//生成节点
tag= document.createElement(relTag);
tag.setAttribute("id",id);
tag.className= cname;
//移动替换节点
tag.appendChild(obj.cloneNode(true));
obj.parentNode.replaceChild(tag,obj);
return obj;
}
window.onload= function(){
//用法1：movediv为页面上的某个标签的id值，#my.base.case省略标签符号则默认标签为div
setParent("movediv","#my.base.case");
//用法2：可省略第二个参数值，默认外标签为div
setParent("movediv");
//用法3：movediv为页面上的某个标签的id值，h3#my.base.case表示外标签为h3，其id值为my，其class值为base case
setParent("movediv","h3#my.base.case");
//用法4：传入标签元素，其余用法类似上面的
setParent(document.getElementById("movediv"),"#my.base.case");
}
此函数的压缩版本如下(使用的是google的Closure Compiler)：
function setParent2(b,a){if((b="string"===typeof b?document.getElementById(b):b)&&b.nodeType){if(1!==b.nodeType)return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1}else return alert("\u65e0\u6548\u7684\u5143\u7d20\u5bf9\u8c61\uff01"),!1;for(var a=a?/^(#|\.)/gim.test(a)?"div"+a:a:"div",e="",f="",i=a.length,c=0,d="",d=!0,g="",h="";c<i;)switch(g=a.charAt(c),g){case"#":e=(e=a.substring(c+1).match(/^[\w\-:\$]+/i))?e[0]:"";c+=e.length+1;d=!1;break;case".":d=(d=a.substring(c+1).match(/^[\w\-:\$]+/i))?
d[0]:"";c+=d.length+1;f+=""+d;d=!1;break;default:d&&(h+=g),c++}a=document.createElement(h);a.setAttribute("id",e);a.className=f;a.appendChild(b.cloneNode(!0));b.parentNode.replaceChild(a,b);return b};
