DOM 简单属性处理

 

关于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" οnclick="changeColor('#ffffcc')"></div>
<div class="k1" style="background-color:#FCC" οnclick="changeColor('#ffcccc')"></div>
<div class="k1" style="background-color:#F9C" οnclick="changeColor('#ff99cc')"></div>
<span οnclick="changeSize(26)">大</span>
<span οnclick="changeSize(16)">中</span>
<span οnclick="changeSize(10)">小</span>
<hr style="clear:both" />


<div id="content">
111111111<br>
222222222222222222222
</div>
</body>

 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值