本文介绍了网页元素处理方法及JavaScript交互实现，包括内容溢出处理（visible, hidden, scroll, auto, inherit）、CSS样式应用（如背景颜色、字体大小调整），以及事件监听（如颜色和大小变化）。通过实例展示了如何利用HTML、CSS和JavaScript进行动态网页设计。
关于div等对象，比较多的内容处理方法
1、不做任何处理，也就是默认情况下，当内容多的时候，会自动的把我们的div给撑开
2、overflow 处理当内容超出设定的框以后办法
visible 默认值。内容不会被修剪，会呈现在元素框之外。
hidden 内容会被修剪，并且其余内容是不可见的。
scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。
例子：
页面文字大小、背景颜色选择器
<style>
.k1{
height:10px;
width:10px;
border:1px #00F solid;
margin:2px;
float:right;
cursor:pointer;}
</style>
<script language="javascript" type="text/javascript">
function changeColor(color){
//设置背景颜色
document.bgColor=color;
}
function changeSize(size){
//获取div对象
document.getElementById("content").style.fontSize=size+"px";
}
</script>
</head>
<body>
<div class="k1" style="background-color:#FFC" onclick="changeColor('#ffffcc')"></div>
<div class="k1" style="background-color:#FCC" onclick="changeColor('#ffcccc')"></div>
<div class="k1" style="background-color:#F9C" onclick="changeColor('#ff99cc')"></div>
<span onclick="changeSize(26)">大</span>
<span onclick="changeSize(16)">中</span>
<span onclick="changeSize(10)">小</span>
<hr style="clear:both" />
<div id="content">
111111111<br>
222222222222222222222
</div>
</body>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
