jQuery基础----16jQuery CSS-jQuery盒子模型

最新推荐文章于 2020-10-28 11:04:38 发布
最新推荐文章于 2020-10-28 11:04:38 发布
阅读量464 收藏
点赞数
分类专栏： jQuery基础
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47702455
版权 
<!DOCTYPE html>
<!--2jQuery CSS-jQuery盒子模型-->

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script src="jquery-2.1.4.min.js"></script>
    <script src="js16.js"></script>
    <style>
        #div01{
            width: 100px;
            height: 100px;
            margin: 50px;
            padding: 50px;
            border: 5px solid #ffff00;
            background-color: #b3d4fc;
        }
    </style>
</head>
<body>
   <div id="div01"></div>
</body>

</html>
js:
/**
 * Created by hao on 2015/8/16.
 */
$(document).ready(function(){

        $("#div01").click(function(){
            //alert($("#div01").height());
            //alert($("#div01").innerHeight());
            alert($("#div01").outerHeight());
        })
    }

)

zhaihaohao1
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jQuery的盒子模型
bboyjoe的博客
08-10 1920
.width()、.height()——为匹配的元素集合中获取第一个元素的当前计算宽度值或高度值,给每个匹配的元素设置宽度值或高度值； .innerWidth()、.innerHeight()——为匹配的元素集合中获取第一个元素的当前计算宽度值或高度值,包括padding，但是不包括border； .outerWidth()、.outerHeight()——获取元素集合中第一个元素的当前计算宽
JQuery CSS操作及jQuery的盒子模型
summergreenhtml的博客
08-20 1161
PS :height是指内容的高度 不包含padding margin… innerheight 包含element+padding代码如下：HTML部分：<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>CSS操作及jQuery的盒子模型</title> <scrip
Jquery盒子模型
xibozi的博客
10-28 184
width() 获取或者设置元素的宽度，不包括内边距，边框，以及外边距 innerWidth 获取或者设置元素加上内边距的宽度 outerWidth() 获取或者设置元素本身加上内边距再加上边框的宽度 outerWidth(true) 获取或者设置元素本身加上内边距、边框以及外边距的宽度 height() 获取或者设置元素的高度，不包括内边距，边框，以及外边距 innerHeight 获取或者设置元素加上内边距的高度 outerHeight() 获取或者设置元素本身加上内边距再加上边框的高度 outerH.
HTML——jQuery—盒子模型
piduocheng0577的博客
03-18 146
盒子模型 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style> *{ margin: 0; padding: 0; } div{ width: 300...
jQuery的盒子模型（尺寸）方法
Cheris_LT的博客
05-19 275
width() 获取或者设置元素的宽度，不包括内边距，边框，以及外边距 innerWidth 获取或者设置元素加上内边距的宽度 outerWidth() 获取或者设置元素本身加上内边距再加上边框的宽度 outerWidth(true) 获取或者设置元素本身加上内边距、边框以及外边距的宽度 height() 获取或者设置元素的高度，不包括内边距，边框，以及外边距 innerHeight 获取或者设置元素加上内边距的高度 outerHeight() 获取或者设置元素本身加上内边距再加上边框的高度 outerH.
jquery-ui.css、jquery-ui.js下载
11-05
在本文中，我们将详细探讨`jquery-ui.css`和`jquery-ui.js`这两个关键文件，并讨论如何在项目中有效地使用它们。 首先，`jquery-ui.css`是jQuery UI的核心样式文件，它包含了所有组件的默认样式和主题。这个文件...
JQUERY-UI.zip_jquery-ui.css
09-20
这个名为"JQUERY-UI.zip_jquery-ui.css"的压缩包文件包含了实现这些功能的核心CSS样式表和可能的JavaScript测试用例，旨在帮助开发者快速构建具有专业外观和交互性的Web应用。 首先，我们关注的是"jquery-ui.css...
jquery-ui.css
07-30
jquery-ui.css
jquery-ui-1.10.4.custom
10-30
<link rel="stylesheet" href="path/to/jquery-ui.css"> <script src="path/to/jquery.js"> <script src="path/to/jquery-ui-1.10.4.custom.min.js"> $(function() { $("#dialog").dialog(); }); 基本...
jquery-ui.min.js
11-07
jQuery UI的使用通常依赖于jQuery基础库，因此在引入`jquery-ui.min.js`之前，需要先引入jQuery。之后，开发者可以通过简单的API调用来实现各种复杂的用户界面功能。例如，创建一个基本的对话框只需以下几步： ```...
jQuery自学心得二（扩展与onConflict，CSS操作及盒模型，遍历，实战）
qq_39082301的博客
05-11 155
一：JQuery的扩展与noConflict1、扩展类似于插件、可以单独写一个.js页面，引入--调用即可。2、noConflict（）方法：代替掉美元符号（在$符被其他框架占用的情况下可以代替）。二：jQuery  CSS操作及 jQuery的盒子模型CSS操作方法/盒子模型：查看jQuery中文API三：jQuery之元素的遍历和过滤1、从上向下遍历方法：children（）只向下遍历一级，参...
jQuery Mobile（二） 基本的页面框架模型
无名的专栏
11-01 1539
在jQuery Mobile中，有一个基本的页面框架模型，就是在页面中通过将一个 标记的“data-role”属性设置为“page”，形成一个容器或视图；而在这个容器中最直接的子节点应该就是“data-role”属性为“header”、“content”、“footer”3个子容器，分别形成了“标题”、“内容”、“页脚”3个组成部分，用于容纳不同的页面内容。通过一个简单实例进行展示：
js盒子模型常用属性
sushans的博客
06-17 8868
1.js盒子模型 指的是通过js中提供的一系列的属性和方法，获取页面中元素的样式信息值 例： #box有很多自己的私有属性： HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype var bo
Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂
sflf36995800的博客
01-10 2637
Webpack 4: mini-css-extract-plugin + sass-loader + splitChunks sass打包未遂 问题描述：单页单入口文件sass 文件内容没有被导入进打包后以的文件 类似 这个问题https://stackoverflow.com/questions/49410921/webpack-4-mini-css-extract-plugin-sass-...
jquery用法--jquery盒子模型
qq_36545656的博客
01-17 1164
jquery的盒子模型主要是用来区分jQuery中所定义的宽高方法在盒子模型中的具体的大小以及它所包含哪几个部分。 例如定义一个div样式如下： #dvi{ width: 100px; height: 100px; margin:50px; padding:50px; bor
jQuery基础----24jQuery扩展-noConflict
翟浩浩Android专栏
08-17 528
html> html> head lang="en"> meta charset="UTF-8"> title>title> script src="jquery-2.1.4.min.js">script> script src="js04.js">script> head> body> div>hello>>>>>div> button id="btn">按钮
jQuery基础----20jQuery遍历之过滤
翟浩浩Android专栏
08-16 429
html> html> head lang="en"> meta charset="UTF-8"> title>title> script src="jquery-2.1.4.min.js">script> script src="js20.js">script> head> body> div> p>div01p> div>
jQuery基础----01jQuery简介及语法,jQuery的基本语法
翟浩浩Android专栏
08-16 410
html> html> head lang="en"> meta charset="UTF-8"> title>title> script src="jquery-2.1.4.min.js">script> script src="js01.js">script> head> body> p>我只雷锋1p> p>我只雷锋2p> p
jquery-ui-timepicker-addon.css
最新发布
06-03
jquery-ui-timepicker-addon.css是基于jQuery UI的日期时间选择器插件datetimepicker的样式表文件，用于定义和控制datetimepicker组件的外观和样式。 datetimepicker插件是一个基于jQuery UI的日期时间选择器插件，它可以在输入框中集成日期和时间选择器，具有用户友好的界面和强大的可定制性。和其他jQuery UI组件一样，datetimepicker插件也需要相应的CSS文件来定义和控制其外观和样式。 jquery-ui-timepicker-addon.css文件是datetimepicker插件的样式表文件，它包含了datetimepicker的默认样式和主题，也可以用于自定义修改样式表文件以达到特定的视觉效果。 使用jquery-ui-timepicker-addon.css文件的方法和使用jquery-ui.css文件的方法类似，具体使用方法如下： 1. 下载datetimepicker插件和jQuery UI框架，从官网（https://jqueryui.com/）或其他来源下载datetimepicker插件和jQuery UI的压缩文件。 2. 引入jquery-ui-timepicker-addon.css文件，将jquery-ui-timepicker-addon.css文件复制到项目中，并在HTML页面中使用<link>标签引入该文件。 ``` <link rel="stylesheet" href="path/to/jquery-ui-timepicker-addon.css"> ``` 3. 引入jQuery和jQuery UI的JS文件，使用<script>标签引入jQuery和jQuery UI的JS文件。 ``` <script src="path/to/jquery.js"></script> <script src="path/to/jquery-ui.js"></script> ``` 4. 引入datetimepicker插件的JS文件，使用<script>标签引入datetimepicker插件的JS文件。 ``` <script src="path/to/jquery-ui-timepicker-addon.js"></script> ``` 引入这些文件后，就可以在输入框中集成日期时间选择器，并使用jquery-ui-timepicker-addon.css文件来控制其外观和样式了。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值