正文

jqueryifwidth

技术帮
技术帮 V管理员 /93阅读/0评论
1225

input宽度自适应

很多时候文本框输入的内容是不固定的，有时候输入的内容多一些需要宽一些有时候输入的内容少一些需要窄一些，所以需要设置input的宽度自适应。工具原料：编辑器、jQuery1、解决宽度自适应的思路是使用jQuery来监听输入事件，进而进行动态的改变input的宽度，实现input宽度自适应的效果。2、首选获取文本的宽度，利用pre 元素可定义预格式化的文本，被包围在 pre 元素中的文本通常会保留空格和换行符;而文本也会呈现为等宽字体，简单的代码示例如下：

var textWidth = function(text){ var sensor = $('<pre>'+ text +'</pre>').css({display: 'none'}); $('body').append(sensor); var width = sensor.width(); sensor.remove(); return width; };

3、根据以上获取到的文字的宽度来给input绑定事件动态改变宽度，简单的代码示例如下：

$("input").unbind('keydown').bind('keydown', function(){ $(this).width(textWidth($(this).val())); });

jqueryifwidth

jquery中获取元素宽度包含padding的方法是

var paddingLeft = $("#contentDiv").css("padding-left"); // 结果："5px"

paddingLeft.replace('px', '')); // 结果："5"

parseInt(paddingLeft.replace('px', '')); //转换为int

css浏览器区域设置

css设置自适应浏览器

做页面，经常遇到，在调整浏览器大小的时候，想要实现内容自适应浏览器宽度或者高度，可以使用js处理：

jQuery(window).resize(function(){

jQuery('#contextDiv').width(jQuery(document).width());

});

jQuery(window).resize();

整理获得浏览器宽度和高度的方法：

$j(window).height(); //浏览器窗口可视区域高度

$j(window).width()); //浏览器窗口可视区域宽度

$j(document).height()); //浏览器窗口文档的高度

$j(document).width()); //浏览器窗口文档对于象宽度

$j(document.body).width()); //浏览器窗口文档body的高度

$j(document.body).height()); //浏览器窗口文档body的高度

$j(document.body).outerHeight(true)); //浏览器窗口文档body的总高度 包括border padding margin

$j(document.body).outerWidth(true));//浏览器窗口文档body的总宽度 包括border padding margin

$j(document).scrollTop()); //获取滚动条到顶部的垂直高度

$j(document).scrollLeft()); //获取滚动条到左边的垂直宽度