jquery计算div的宽度，然后设置自动调整宽度显示

于 2021-11-11 01:31:30 发布
阅读量330 收藏
点赞数 1
分类专栏： jquery 文章标签： jquery 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/cdcdhj/article/details/121260256
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=utf-8"/>
		<title></title>
		
		<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
		<link href="jquery-ui/css/base/jquery-ui-1.9.2.custom.css" rel="stylesheet">
		<script src="jquery-ui/js/jquery-1.8.3.js"></script>
		<script src="jquery-ui/js/jquery-ui-1.9.2.custom.js"></script>
		
		
		<style type="text/css">
			div.list{
				font-size: 14px;
				width: 150px;
				border: 1px solid pink;
				height: 85px;
			}
			.subone{
				float:left;
				overflow: hidden;
			}
			.subtwo{
				float: left;
				color:blue;
			}
		</style>
	</head>
	<body>
		<center>
			<div id="div1">
				<div class="list">
					<div class="subone">jQuery是一个javascript的库</div>
					<div class="subtwo">&nbsp;简介</div>
				</div>
				<div class="list">
					<div class="subone">jQuery极大的简化了javascript编程</div>
					<div class="subtwo">&nbsp;简介</div>
				</div>
				<div class="list">
					<div class="subone">jQuery很容易学习</div>
					<div class="subtwo">&nbsp;简介</div>
				</div>
				<div class="list">
					<div class="subone">jQuery拥有供ajax开发的丰富的函数方法库</div>
					<div class="subtwo">&nbsp;简介</div>
				</div>
			</div>
			
		</center>
		
		<script type="text/javascript">
		
			$(function(){
				var linelen=135;
				$.each($(".list"),function(i){
					if(($(".subone:eq("+i+")").width()+$(".subtwo:eq("+i+")").width())>linelen){
						var length=linelen-$(".subtwo:eq("+i+")").width();
						$(".subone:eq("+i+")").css("width",length+"px");
						$(".subone:eq("+i+")").css("height",85+"px");
					
					}
				});
			});
		
		</script>
		
	</body>
</html>
cdcdhj
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
div盒子究竟占多大面积实际的宽度高度如何计算
09-25
主要介绍了div盒子究竟占多大面积实际的宽度高度如何计算的，有图有真相并附示例代码，为此疑惑的朋友可以参考下
jquery实现让导航超出显示范围外时自动贴在屏幕最顶上
weixin_33728268的博客
09-21 223
　　经常会遇到这样的情况，当页面展示内容过长时，想点导航切换栏目，就得把滚动条拉回到顶上，这样操作总不太人性化，能不能让导航超出显示范围外时自动贴在屏幕最顶上呢？答案肯定是能的。如果不太明白，把滚动条拉到下面点，看下我博客是效果就明白了。 　　其实实现起来并不难，我们先把实现流程大致想一下，首先，如果导航在显示范围内，就不用做修改。当导航超出显示范围，也就是导航距离屏幕顶部的距离小于0的时候，我...
js jqgrid 宽度问题 滚动条出现时调整宽度
没有遥远
02-28 1086
http://stackoverflow.com/questions/875225/resize-jqgrid-when-browser-is-resized http://help.dottoro.com/ljgsfkbc.php js事件列表 overflow事件 overflowChanged事件 转载 jqgrid调整宽度自适应 6　　jqgrid属性：　　widt...
jquery -> 根据屏幕宽度调整宽度
mft8899的博客
11-15 763
// jQuery.extend({ changeIndexSlider:function(){ var totalWidth=jQuery("#t3-header").width(); jQuery("#reslider_ul").height(totalWidth/2); jQuery(".slide_img").width(totalWidth); ...
jquery动态改变div宽度和高度
u011927449的博客
07-07 1877
效果体验：http://keleyi.com/keleyi/phtml/jquery/23.htm 完整代码： 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head&g.
jquery实现动态改变div宽度和高度
10-24
主要介绍了jquery实现动态改变div宽度和高度，效果非常不错，而且兼容性也很好，有需要的小伙伴可以参考下。
jquery动态调整div大小使其宽度始终为浏览器宽度
10-25
然后，我们编写jQuery代码来实现动态调整div宽度的功能： ```javascript var browser_width = $(document.body).width(); // 获取当前浏览器宽度 $("div.show").css("width", browser_width); // 设置div的宽度...
jquery获取div宽度的实现思路与代码
10-27
DIV的width宽度如何获取呢？接下来介绍使用jquery获取DIV的width宽度，感兴趣的朋友可以了解下的
jQuery获取与设置div的宽和高
ztnhnr的专栏
01-01 5343
前端页面开发时，通过jquery有两种方法获取与设置div的宽高：使用尺寸函数或使用css方法。 一、获取宽和高 1.1 尺寸函数： width()获取宽度 height()获取高度 1.2 css方法： css("width")获取宽度 css("height")获取高度 区别： 尺寸函数返回的值为整型，而css获取的值为带px的字符串 举例： <!DOCTYPEhtml> <htmllang...
jquery里面获取div区块的宽度与高度
热门推荐
soman的博客
10-09 6万+
获取宽度 $('div').width();     获取：区块的本身宽度 $('div').outerWidth();     获取：区块的宽度+padding宽度+border宽度 $('div').outerWidth(true);    获取：区块的宽度+padding宽度+border宽度+margin的宽度 获取高度 $('div').heig
Jquery获取div的宽度与高度
一颗松鼠
09-25 3万+
宽度 $('div').width(); 区块的本身宽度 $('div').outerWidth(); 区块的宽度+padding宽度+border宽度 $('div').outerWidth(true); 区块的宽度+padding宽度+border宽度+margin的宽度 高度 $('div').height(); 区块的本身高度 $('div').outerHe...
jquery获取div的宽度
qq_40002311的博客
07-10 2121
例如： <div id="divLen" style="padding-left:10px;margin-left:10px"></div> <script> //宽度 //只是获取内容的宽度 var contentWidth = $("#divLen"). width(); //获取内容和padding的宽度 var contentWithPadding = $("#divLen"). innerWidth(); //获取内容+padding+border
jquery 控制滚动条 实现自动滚动浏览
qq_33281259的博客
05-19 1602
<!doctype html> <html lang="en"> <head> <script type="text/javascript" src="{$p_tpl}/js/jquery-3.5.1.js" charset="utf-8"></script> <style> .kj{ height:70px; width:25%; float:left; color:#fff; font-size:40px; } </
Jquery 自适应宽度的input
哇咔咔
05-09 6914
最近按老大嘱咐，在学一些奇奇怪怪的东西，gulp，sass，react啥的... 还在做一个仿QQ邮箱的添加联系人的那个东西。 对，就是这个。 我本来对这个的操作只有可以选人，可以删除选中的人... 但是！！！‘ 开始做了之后，才发现哪里有我想的那么简单！！！ 被卖了！！！ 这里，主要是做一个所谓的自适应宽度的input框。 我纠结了很久。 只有一个思路：获取input框
jQuery设置div的自适应布局
weixin_30588729的博客
01-23 266
一、HTML代码： <div class="ui-wraper" id="Wraper"> </div> 二、CSS代码： html { width: 100%; height: 100%; min-height: 350px; /*html最小高度和要自适应模块的高度一致*/ min-width: 100...
jquery实现div自适应浏览器高度（宽度）
Optimal New
05-02 9191
jquery实现div自适应浏览器高度（宽度） function autoHeight() { var h = $(window).height(); var h_old = 300; if (h > h_old) { $(“.left”).css(‘height’, h); } else { return false; } } $(function() { autoHeight() $(
jq 计算div宽度--innerwidth，outerwidth，width
小利的博客
11-25 3041
width()方法用于获得元素宽度； innerWidth()方法用于获得包括内边界（padding）的元素宽度； outerWidth()方法用于获得包括内边界(padding)和边框(border)的元素宽度； 如果outerWidth()方法的参数为true则外边界(margin)也会被包括进来，即获得包括外边框(margin)、内边界(padding)和边框(border)的元素宽度。
input文本框设置自动宽度，textarea文本域设置自动高度。
大哥的博客
08-23 4966
input文本框设置自动宽度，textarea文本域设置自动高度。 <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> <head> <meta charset="UTF-8"> <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.0.js"></script>
jquery实现div设定宽度后文本自动换行
最新发布
08-09
使用jQuery实现div设定宽度后文本自动换行，可以通过设置div的CSS属性来实现。 首先，在HTML中定义一个div元素： ``` <div id="myDiv">这是一段很长的文本，当div的宽度设定后，文本会自动换行。</div> ``` 然后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值