`
zhizedai
  • 浏览: 16037 次
  • 性别: Icon_minigender_1
  • 来自: 大连
最近访客 更多访客>>
社区版块
存档分类
最新评论

js 控制overflow 和clip 属性 ,可以控制元素的部分隐藏

    博客分类:
  • js
阅读更多
首先先了解下 css的overflow 和clip属性(主要clip属性)
clip 属性的值指定了元素的剪切区域。在css2中,剪切区域是矩形的,但是clip属性的语法为将来版本支持其他剪切形状创造了可能性。clip属性的语法如下:
element.style.clip = "rect(0px 100px 100px 0px)";
也可以这样定义:
element.style.clip = "rect(auto 100px auto auto)";
注意,括号中的四个值都是长度值,所以要有单位,不能用百分比。各个值之间用空格,不能用逗号(我在ff中测,用逗号也可以,考虑到其他浏览器不建议)。
分享到:
评论

相关推荐

    详解CSS3:overflow属性

    overflow为溢出(容器),当内容超出容器时只需添加overflow属性值为hidden, 就可以把超出容器的部分隐藏起来; 如果内容超出容器却又不想其隐藏时可以将其属性值设置为auto; overflow:auto 属性如果超出就出现...

    全面阐述overflowhidden属性

    css中overflow:hidden CSS样式可以隐藏溢出的部分 好处就是可以防止网页变形

    css使用overflow属性控制滚动条的样式

    overflow属性: 检索或设置当对象的内容超过其指定高度及宽度时如何显示内容,其用到的表现形式和值有以下几种 overflow: auto; 在需要时内容会自动添加滚动条 overflow: scroll; 总是显示滚动条 overflow-x: hidden...

    overflow属性的使用小例子

    使用overflow的属性,来控制溢出的内容,效果可以自己试试看

    细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果

    大家可以发现,上网站上查询之后会得到overflow-x和overflow-y的一大堆属性值,但很多网站并没有详细说明各属性值的效果,我们今天细说一下。 各属性值如下: visible:默认值,不裁剪内容,可能会显示在内容框...

    overflow: hidden; 如何隐藏上面部分

    overflow: hidden; 如何隐藏上面部分的实现方式 纯html代码,举例说明思路 ;height:100px;overflow:auto"> <div>1 <div>2 <div>3 <div>4 <div>5 <div>6 </div>

    div overflow 超出隐藏属性使用说明

    div overflow 超出隐藏属性使用说明,不知道overflow怎么用的朋友可以参考下。

    CSS overflow-wrap新属性值anywhere 用法大全

    一、先了解下overflow-wrap属性 CSS overflow-wrap 属性其实就是以前的 word-wrap 属性,MDN现在直接把 word-wrap 的文档页跳转到 overflow-wrap 属性的文档页了。 由于 overflow-wrap 属性IE浏览器不支持,而其他...

    详解overflow-scrolling解决滚动卡顿问题

    如果你对某个div或模块使用了overflow: scroll属性,在iOS系统的手机上浏览时,则会出现明显的卡顿现象。但是在android系统的手机上则不会出现该问题。 解决方法 以下代码可解决这种卡顿的问题:-webkit-overflow-...

    Javascript通过overflow控制列表闭合与展开的方法

    主要介绍了Javascript通过overflow控制列表闭合与展开的方法,设计javascript动态操作页面元素与样式的相关技巧,需要的朋友可以参考下

    详解CSS中zoom属性或overflow:auto属性清除浮动的作用

    因为Zoom属性是IE浏览器的专有属性,所以他清除浮动作用只适用于IE浏览器,而Firefox、google等浏览器则需要使用overflow:auto属性来清除浮动。所以要达到兼容IE6、IE7、IE8、Firefox、google浏览器的时候就必需使用...

    CSS属性text-overflow的使用问题

    text-overflow:clip | ellipsis 这个属性使用必须通过几个属性一块才能使用 1,overflow:hidden; 这个属性是内容区装不下内容应该怎么办。这里让溢出内容直接不显示。这个感觉就是必备的属性。我内容文本溢出全部...

    CSS clip元素rect属性中各个参数的含义示例介绍

    clip 属性剪裁绝对定位元素 当一幅图像的尺寸大于包含它的元素时会发生什么呢?"clip" 属性允许您规定一个元素的可见尺寸,这样此元素就会被修剪并显示为这个形状。 说明: 这个属性用于定义一个剪裁矩形。对于一...

    clip 剪裁矩形实现代码

    一、clip属性必须和定位属性postion一起使用才能生效。 二、clip裁切的计算坐标都是以左上角即(0,0)点开始计算,如图三所示,这点不像padding和margin,它们两个的右边距和下边距是从最右边和最下边开始计算的。 ...

    css overflow溢出隐藏(文字溢出时的自动隐藏处理)

    css溢出隐藏一般用于当内容太大以至于无法适应指定的区域时,通过设置css下的overflow属性来隐藏其内容

    CSS属性探秘系列(二):overflow及相关属性text-overflow

    本文是CSS属性探秘系列的第二篇,主要为大家介绍了css的overflow属性以及其相关属性text-overflow,有需要的朋友可以参考下,欢迎大家来进行讨论

    移动端webapp支持overflow

    移动版游戏器不支持overflow:auto,即多余内容隐藏,并能通过手指拉动来滚动内容。目前有很多模拟这种效果的js库,如iScroll。但经项目测试,iscroll在很多浏览器中有明显的性能问题。根据isSCROLL改写的

    页面内容overflow代码

    页面内容overflow代码,HTML,JavaScript,CSS

Global site tag (gtag.js) - Google Analytics