标签(div、input)大小随内容变化
来源:互联网 发布:c语言布尔类型输出 编辑:程序博客网 时间:2024/05/22 07:41
1.div标签随内容大小变化
这些黄色矩形框大小得随内容变化,适应性的
哈哈哈想一下,你会怎么做?
其实很简单
没错!width:auto;就可以了
咦,好像有点挤,没事,加个padding: 10px;
2. 文本框(input,textarea)等的大小随内容自适应
.blockcolors{width:auto;height:26px;color:#fff;background:orange;line-height: 26px;text-align: center;border-radius: 4px;font-size:1.2em;margin-left: 10px;cursor: pointer;display: inline-block;margin-top: 20px;padding: 10px;}
思路:
为了让输入框的大小和内容匹配,我只需要获取内容显示需要的长度就可以了,如何获取呢?
scrollWidth:
对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
代码实现:
<input type="text"><script> document.querySelector("input").addEventListener("input",function(){ this.style.width="0px";//让 scrollWidth 获取最小值,达到回缩的效果 this.style.width=this.scrollWidth+"px"; });</script>
一般有最大最小长宽度限制:
中级实现:
附:
scrollWidth,clientWidth,offsetWidth的区别
解释:
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
阅读全文
0 0
- 标签(div、input)大小随内容变化
- 监听input与div的内容变化
- 让div的大小随着内容的变化而变化
- input 长度随内容长度自动变化
- input 随其内容而变化长度
- img 随div的大小变化
- div位置大小不随浏览器变化而变化
- div内容变化事件
- 监听DIV内容变化
- js设置div大小随窗口大小变化
- Jquery监测input内容变化
- 监听input内容实时变化
- 使input文本框随输入内容变化长度的方法
- 使input文本框随内容变化改变长度
- 设置div大小随着窗口大小变化
- CSS 怎么设置div的宽度根据里面的内容大小的变化
- 监听div内容的变化
- jquery 监听div内容变化
- JavaScript闭包
- java 虚拟机
- AS中下载插件
- RTTI
- Input子系统与多点触摸技术-2
- 标签(div、input)大小随内容变化
- 使用 JAX-RS 简化 REST 应用开发
- 关于表单提交数据乱码问题
- 众包模式
- 函数的重载
- .NET CORE 2.0 Linux下内存BUG
- PHP网站与微信公众号接口接入
- 图形学领域的关键算法及源码[转]
- Java集合Map