DOM 简单属性处理

本文介绍了网页元素处理方法及JavaScript交互实现,包括内容溢出处理(visible, hidden, scroll, auto, inherit)、CSS样式应用(如背景颜色、字体大小调整),以及事件监听(如颜色和大小变化)。通过实例展示了如何利用HTML、CSS和JavaScript进行动态网页设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 

关于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>

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值