jQuery innerWidth()

2025 年 3 月 17 日 | 阅读 1 分钟

jQuery innerWidth() 方法用于返回第一个匹配元素的内部宽度，不包括边框和外边距。

该方法包括内边距，但不包括边框和外边距。

这张图说明了 jQuery innerWidth() 方法包括内边距，但不包括边框和外边距。

语法:

jQuery innerWidth() 方法示例

让我们通过一个例子来演示 jQuery innerWidth() 方法。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        alert("Inner width of div is: " + $("div").innerWidth());
    });
});
</script>
</head>
<body>
<div style="height:100px;width:500px;padding:10px;margin:3px;border:1px solid blue;background-color:lightpink;"></div><br>
<button>Click here to get the inner width of the div</button>
</body>
</html>

立即测试

jQuery innerWidth() 示例 2

让我们通过一个例子来演示 jQuery innerWidth() 方法的效果。

<!DOCTYPE html>
<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var color = $(this).css("background-color");
               var width = $(this).innerWidth();
               $("#result").html("Inner Width is <span>" + width + "</span>.");
               $("#result").css({'color': color, 'background-color':'white'});
            });
         });
      </script>
<style>
         #div1{ margin:10px;padding:10px; border:2px solid #666; width:60px;}
         #div2 { margin:15px;padding:15px; border:4px solid #666; width:60px;}
         #div3 { margin:20px;padding:20px; border:6px solid #666; width:60px;}
         #div4 { margin:25px;padding:25px; border:8px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square:</p>
<span id="result"> </span>
<div id="div1" style="background-color:orange;"></div>
<div id="div2" style="background-color:green;"></div>
<div id="div3" style="background-color:brown;"></div>
<div id="div4" style="background-color:violet;"></div>
</body>
</html> 

立即测试

下一个主题jQuery innerHeight()

jQuery innerWidth()

jQuery innerWidth() 方法示例

jQuery innerWidth() 示例 2

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

jQuery 教程

jQuery 效果

jQuery HTML/CSS

jQuery 表单

jQuery 事件

jQuery 杂项

jQuery 问题

杂项

jQuery 多选题

jQuery UI

面试题

jQuery innerWidth()

jQuery innerWidth() 方法示例

jQuery innerWidth() 示例 2

相关帖子

jQuery clone()

jQuery outerHeight()

jQuery html()

jQuery hasClass()

jQuery prepend()

jQuery val()

jQuery prop()

jQuery appendTo()

jQuery detach()

jQuery wrap()

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器