`
zhang_yingjie
  • 浏览: 114579 次
  • 性别: Icon_minigender_1
  • 来自: 大连
社区版块
存档分类
最新评论

几个width,height,x,y的解释

CSS 
阅读更多
clientX:事件发生时,鼠标在客户端区域(不包含工具栏,滚动条等)的位置。
clientY:事件发生时,鼠标在客户端区域(不包含工具栏,滚动条等)的位置。
offsetX:鼠标相对于引起事件的对象的x坐标。
offsetY:鼠标相对于引起事件的对象的y坐标。
x:鼠标相对于引起事件的元素的父元素的x坐标。
y:鼠标相对于引起事件的元素的父元素的y坐标。
screenX:相对于整个计算机屏幕的鼠标的x坐标。
screenY:相对于整个计算机屏幕的鼠标的y坐标。


clientWidth = width + padding
clientHeight = height + padding
offsetWidth = width + padding + border
offsetHeight = height + padding + border

scrollWidth是对象实际内容的宽度。

一个scrollWidth和clientWidth的例子:

<html>

<head>

<title>77.htm文件</title>

</head>

<body>

<textarea wrap="off" onfocus="alert(’scrollWidth:’+this.scrollWidth+’\n clientWidth:’+this.clientWidth);"></textarea>

</body>

</html>

在文本框内输入内容,当横向滚动条没出来前scrollWidth和clientWidth的值是一样的。

当一行内容超出文本框的宽度,就有横向滚动条出来了,scrollWidth的值就变了。




CSS中的margin属性,与clientWidth、offsetWidth、clientHeight、offsetHeight均无关




  • 大小: 37.4 KB
分享到:
评论

相关推荐

    java 根据源图片的x、y、width、height截取需要的图片

    本文将详细介绍如何使用Java编程语言,根据指定的位置(x、y)及尺寸(width、height),精确地裁剪出所需的图片部分。 #### 关键知识点解析 ##### 1. 导入必要的库 为了实现图片的读取、裁剪和写入功能,我们需要...

    c#做的俄罗斯方块,不下后悔

    提供一个核心类,接口仅几个,方便外围开发,你可以在此基础上做一些扩展,如使其界面更美观,方块更美观等 class DyPanel :Panel { #region 类属性 private Timer t_slow,t_fast; private XY current_p, start_...

    Python生日蛋糕代码

    前言 Hello,小伙伴们晚上好吖!... x=draw_x(width, i) y=draw_y(height,i)+h t.goto(x,y) t.end_fill() t.begin_fill() t.fillcolor(colors_a[1]) for i in range(180): x=draw_x(width, -i) ……

    Roberts边缘检测算法的C语言实现.pdf

    p = image + y * width + x; gx = p[1] - p[-1]; gy = p[width] - p[-width]; g = sqrt(gx * gx + gy * gy); if (g &gt; 255) g = 255; p[0] = g; } } } ``` 在上面的代码中,我们使用了两个循环来遍历图像的...

    ShowImage_mosaic.rar_C#马赛克_image mosaic_mosaic_图像马赛克

    private void DrawBlock(Bitmap img, int x, int y, int width, int height, Color color) { for (int i = x; i &lt; x + width; i++) { for (int j = y; j &lt; y + height; j++) { img.SetPixel(i, j, color); } ...

    直方图均衡化——C语言实现

    在C语言中实现直方图均衡化涉及到几个关键步骤,包括计算直方图、构建累积分布函数(CDF)以及映射新的像素值。接下来我们将详细探讨这些步骤以及如何在C程序中实现它们。 首先,直方图是表示图像中每个灰度级出现...

    bmp位图的简单处理(灰度化,拷贝,左右旋转)(C语言)

    int srcIndex = (height - y - 1) * width * bitsPerPixel / 8 + x * bitsPerPixel / 8; int dstIndex = y * width * bitsPerPixel / 8 + (width - x - 1) * bitsPerPixel / 8; memcpy(&dst[dstIndex], &src...

    ConsoleGUI:控制台的Python图形库。 包含几个小部件

    Textbox(new_text,width,height,x,y,[z])绘制不透明的Textbox可以使用set_text(new_text)更改文本Gradient(width,height,x,y,[z])类似于Rect,但填充了一个Gradient。 可以使用set_direction({'up'...

    canvas学习和滤镜实现代码

    1. 绘制图像:drawImage(img, x, y, width, height)或drawImage(img, sx, sy, swidth, sheight, x, y, width, height)方法,可以用来在Canvas上绘制图片,也可以实现图片的缩放和裁剪。 2. 获取图像数据:...

    C#图片链接代码

    originalImage.SetPixel(x, y, Color.FromArgb(pixelColor.A, grayScale, grayScale, grayScale)); } } } ``` ##### 2.2 反色 反色即为取每个像素的补色。补色是指色彩环上相隔180度的颜色,反色操作可以得到一...

    QRcode 基于Zxing 生成二维码

    二维码(QR Code)是一种二维条形码,可以存储大量的文本、数字、URL等信息,广泛应用于各种场景,如产品标识、网页链接、...只需几个简单的步骤,就可以将任意文本信息编码成二维码图像,方便在各种应用场景中使用。

    C语言几个程序代码

    根据给定的信息,本文将详细解释C语言中的一个具体示例——如何利用C语言实现图像旋转功能,并且会对代码中的关键部分进行详细解读。 ### C语言实现图像旋转 #### 一、程序概述 该程序使用C语言实现了图像的旋转...

    C++程序设计上机考试题库.doc

    根据提供的文档信息,我们可以归纳总结出以下几个相关的C++知识点: ### 1. 定义类与成员函数 在第一个例子中,定义了一个`Box`类,该类包含三个私有数据成员`x`, `y`, 和`z`,分别表示盒子的长、宽和高。此外还...

    创建 canvas 的方法很简单.docx .docx

    创建canvas的步骤非常简单,主要涉及以下几个关键知识点: 1. **HTML中的canvas元素**: 在HTML文档中,我们通过`&lt;canvas&gt;`标签创建一个画布。例如: ```html &lt;canvas id="myCanvas" width="300" height="150"&gt; ...

    情人节秀恩爱的10种爱心代码,拿走吧!

    &lt;rect x="10" y="10" width="80" height="80" fill="#ff6666" /&gt; ``` **解释**:这是一种使用SVG格式创建爱心图案的方法。通过定义一个矩形和一个路径元素,可以构建一个带有白色心形图案的红色背景。这种方式...

    html5 canvas绘制孙悟空猴哥来拜年特效

    ctx.drawImage(img, x, y, img.width, img.height, x, y, img.width, img.height); x += speedX; // 更新位置 if (x + img.width &gt; canvas.width || x ) { // 遇到边界时改变方向 speedX = -speedX; } ...

    canvas实现窗帘特效

    function Curtain(color, x, y, width, height) { this.color = color; this.x = x; this.y = y; this.width = width; this.height = height; } Curtain.prototype.draw = function() { ctx.fillStyle = this...

    cocos2d-x 学习日志(2)之使用UIWebView加载网页

    webView-&gt;setPosition({visibleOrigin.x + visibleSize.width / 2, visibleOrigin.y + visibleSize.height / 2}); webView-&gt;setContentSize({visibleSize.width * 0.5, visibleSize.height * 0.5}); ``` 这里将...

    VB图片处理-灰度处理-二值化-保存

    在VB6.0环境下进行图像处理,主要包括了几个关键步骤:图片读取、灰度处理、二值化以及保存。这些技术在计算机视觉、图像分析和机器学习领域中都有着广泛的应用。 首先,让我们来理解一下“灰度处理”。灰度处理是...

Global site tag (gtag.js) - Google Analytics