HTML标签的尺寸与位置

最新推荐文章于 2023-06-15 21:37:23 发布
最新推荐文章于 2023-06-15 21:37:23 发布
阅读量175 收藏
点赞数
文章标签： javascript ViewUI

<html>
<head>
<title>访问HTML元素的位置和尺寸</title>
<script language="JavaScript">
function showPosition(){
   alert("left:" + myP.offsetLeft + " top:" +myP.offsetTop);
}
function showSize(){
   alert(myP.offsetHeight + " X " +myP.offsetWidth);
}
function showParent(){
   alert(myP.offsetParent.tagName);
}
function viewElement(){
   var objEle = document.all.tags("P");
   if (objEle.length > 4 )
      objEle(3).scrollIntoView(true);
}
</script>
</head>
<body id="myBody">
<h2>访问HTML元素的位置和尺寸</h2>
<hr>
<p id="myP" align="left">访问HTML元素的位置和尺寸</p>
<form>
<input type="button" οnclick="showPosition()" value="元素位置">
<input type="button" οnclick="showSize()" value="元素尺寸">
<input type="button" οnclick="showParent()" value="显示父元素">
<input type="button" οnclick="viewElement()" value="显示段落">
</form>
<p align="left">访问HTML元素的位置和尺寸1</p>
<p align="left">访问HTML元素的位置和尺寸2</p>
<p align="left">访问HTML元素的位置和尺寸3</p>
<p align="left">访问HTML元素的位置和尺寸4</p>
<p align="left">访问HTML元素的位置和尺寸5</p>
</body>
</html>


 

weixin_33696822
关注
html中frameset标签无法正常显示原因分析及解决
12-13
首先，我们要明确`<frameset>`标签的正确使用位置。根据HTML规范，`<frameset>`应该作为HTML文档的顶级结构，也就是说，它应该直接包含在`<html>`标签内，而不是`<body>`标签内。在给定的描述中，作者错误地将`...
HTML基础重点_一般标签、常用标签和表格
09-28
图片的插入使用`<img>`标签，`src`属性指向图片URL，`alt`提供替代文字，`width`和`height`定义图片尺寸，`alt`属性对于搜索引擎优化和在图片无法加载时提供描述非常重要。 表格是HTML中展示结构化数据的工具，使用...
图像标签 链接标签
weixin_43278772的博客
10-28 485
1.图像标签：&lt;img src ="图像URL" /&gt; &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Document&lt;/title&gt; &lt;/he
js 查看标签尺寸位置相关信息 getBoundingClientRect()
weixin_42448623的博客
10-26 182
getBoundingClientRect() 该方法返回一个对象，对象里面有left,top,right,bottom,height,width等属性。 left,top 代表该元素左上角 xy坐标 right,bottom 代表该元素右下角 xy坐标 height（bottom-top），width（right-left） 老版本IE未实现 返回结果不是实时的 ...
img标签 文件不存在_HTML常用标签
weixin_39929566的博客
11-29 373
a 标签的用法<!-- href 标签使用 --> img 标签的用法1.img属性 src="1.jpg"; :图片地址 height="500px"; :高度500px width="500"; :宽度500 alt="图片加载失败"; :图片加载失败后显示文字 2.img事件 onload:图片加载成功时触发事件 onerror:图片加载失败后触发事件 3.img响应式 ma...
Skr-Eric的HTML课堂（五）——HTML的尺寸单位与颜色取值和标签分类和尺寸与边框
Skr_Eric的博客
11-22 491
尺寸单位与颜色取值 1. 尺寸单位 1. px : 像素单位，浏览器默认单位 2. % : 百分比，参照父元素对应属性的值计算 et: <div> <p></p> </div> -------- div{ width:200px; height:200px; } p{ width:50%; height:50%; }...
DOM元素的尺寸和位置
youhebuke225的博客
05-25 385
目录DOM元素的尺寸和位置1.尺寸1.1 尺寸API1.2 获取视口的尺寸2. 位置2.1 位置API2.2 getBoundingClientRect()3. 滚动元素3.1 API DOM元素的尺寸和位置 1.尺寸 我们首先准备好一个盒子 #box{ width: 200px; height: 200px; padding: 100px; border: 20px solid black; margin: 10px; background-color: red; } 1.1 尺寸API
HTML中img标签只显示图片中心位置的方法(三种方法)
09-28
这里介绍三种方法来实现`<img>`标签只显示图片中心位置的效果。 ### 方法一：使用CSS的`clip: rect()`和`position: absolute` 这种方法利用了CSS的`clip`属性来剪切图片的显示部分。首先，你需要将`<img>`标签的`...
HTML5移动端开发中的Viewport标签及相关CSS用法解析
11-21
理想视口是指与设备物理屏幕尺寸相对应的视口，使得网页内容能够按照设计尺寸完美显示，无需缩放。对于高像素密度（如Retina屏幕）的设备，理想视口的尺寸通常是物理像素除以设备像素比（DPR, Device Pixel Ratio）...
三张图带你了解HTML元素尺寸
Salange1的博客
10-22 358
不知道你们有没有做过tabs切换与滚动条联动的需求，之前项目中有遇到过这种需求，然后就在百度上随随便便的搜了一段代码来贴上去，反正功能能用就行了，也没有认真去理解过代码，今天翻红宝书翻到元素尺寸这一节内容，写下此文已做记录。
HTML | html文档中html和body标签的默认尺寸是多少？
最新发布
青春木鱼的博客
06-15 2620
html文档中，html和bod标签，在不做任何设置的情况下，html根元素默认宽度为屏幕宽度，默认高度为8px（body元素的上margin 8px），body的默认宽度=屏幕宽度 - 左margin 8px - 右margin 8px。
HTML标签的宽高设置
icbjhbcjkbda的博客
10-16 2468
HTML标签的宽高设置
HTML文档中标签位置问题
sd6022的博客
02-11 1625
感谢 本笔记来自这两位博主文章 1、<script>在HTML文档中位置 2、关于<Script>标签在html页面放置位置 文章目录感谢一、HTML文档解释方式二、Script标签的位置1.script标签放置在head标签内部时：2.script标签放置在body标签内部时：3.script标签放置在body标签之后时：页面渲染 一、HTML文档解释方式 按照HTML文档中顺序依次从上到下解释 解释过程中遇到<link>就会异步的下载css然后继续向下解释 遇到
html标记与属性（文字的位置，大小，颜色，形式）
weixin_43362233的博客
07-02 5454
基本用法 <标签名 属性名=pass 属性名=pass…> 各个属性之间通过空格来分割 01 用align来控制段落的水平位置 <h1 align="center">pass</h1> <h2 align="right">pass</h2>
html的标签位置属性（学习笔记）
影子
12-23 2万+
div：定义位置有两种方式：一种是使用相对位置，一是使用绝对位置。 绝对定位有两个属性：left和top，分别是距离网页左边和网页顶部的绝对位置。借助style属性，按照如下的格式进行设置： style = "position:absolute;left:距离左边距离;top:距离顶部距离" 例如： &lt;div name = "mydiv" id="mydiv" style="po...
HTML标签img--改变图片尺寸
热门推荐
This My Life - chisj
08-03 9万+
1、统一大小？ 我的网页上面有许多的图片，有的大，有的小，我想如果图片大的实现缩放，所有的都是一般大。来看看没有是什么效果。 大家看的出来，非常的难看的，于是我想让有没有一种方法是把那个大的变成小的呢？ <li><img src='http://pic2.ooopic.com/01/03/51/25b1OOOPIC19.jpg' width=400px height=4...
html标签大小写
iteye_13425的博客
05-28 1181
html是4.0之前不区分大小写，但是html5之后最好用小写
<script>标签在HTML中的位置
pwdjying的博客
07-12 4843
通常，我们把元素都放在页面的元素中，例如： window.onload = function(){//页面所有元素加载完毕 var btn = document.getElementById("btn");  //获取id为btn的元素(button) btn.onclick = function(){   //给元素添加onclick事件 var arrays
html中相对位置与绝对位置
由于须的博客
06-11 3万+
用户在浏览网站时经常会看到左侧有一种宣传栏，它不会随着鼠标滚动而不被用户看到，它会始终以页面的中心为参照物始终保持在左侧一个固定的位置，今天我们来做一下这个小例子，让我们先了解一下盒模型和相对丶绝对位置的前端知识。盒模型分为两种一种是标准模型，另一种是IE模型，它的组成由外向里是margin，border，padding，content，如下两个图所示。标准模型，宽高均为内容（content）的宽...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值