clip:rect('top', 'right', 'bottom', 'left')是啥意思？

Posted 2023-05-05

top 

n. 顶部，顶端；上部；首席；陀螺vi. 高出，超越；结束；达到顶点vt. 超越，超过；给…加盖；达到…的顶端

adj. 最高的，顶上的；头等的                           

right 

adj. 正确的；直接的；右方的vi. 复正；恢复平稳n. 正确；右边；正义adv. 正确地；恰当地；彻底地

vt. 纠正

 

 

bottom 

n. 底部；末端；臀部；尽头adj. 底部的vt. 装底；测量深浅；查明真相

vi. 到达底部；建立基础

left 

adj. 左边的；左派的adv. 在左面n. 左边；左派；激进分子v. 离开（leave的过去式）

参考技术A 矩形采用左上和右下两个坐标点来确定。top、right、bottom、left分别代表构成矩形的两个坐标点的位置， 参考技术B 上下左右方位词

使用 JS 更改 CSS 中的剪辑

【中文标题】使用 JS 更改 CSS 中的剪辑

【英文标题】：Change clip in CSS with JS

【发布时间】：2015-01-18 02:24:01

【问题描述】：

所以我正在制作一个生命值条，当剩余生命值减少时，我需要缩短生命值条的宽度。到目前为止，我已经写了这个。

JS

var remainingHealth =333;
function update()
    document.getElementById("nowbar").style.clip = "rect(0, remainingHealth, 90, 0)";

CSS

#nowbar 
    position: absolute;
    margin-top: -24px;
    margin-left: 5px;
    clip: rect(0px,666px,90px,0px)

我创建了一张图片来解释问题所在： http://i.imgur.com/UAd4J3b.png

所以问题是我无法用 JS 控制宽度，所以屏幕上的宽度显示为 666 像素而不是剩余健康（333 像素）。但是当我在 style.clip 中使用 333 更改剩余健康时，它会显示 333px，所以它可以正常工作。

【问题讨论】：

JavaScript 中的文本文字中的变量名不会自动替换——您必须通过连接单个部分来正确地构建字符串。

【参考方案1】：

所以我认为你对这个问题的看法有点混乱。

所以当你编写javascript代码时：

var remainingHealth =333;

var remainingHealth 确实等于 333。它不等于 666 或以任何方式连接到 CSS 文件，正如您在图片中暗示的那样：http://i.imgur.com/UAd4J3b.png

问题是

document.getElementById("nowbar").style.clip

需要一个字符串值，你也给它一个字符串值，你设置document.getElementById("nowbar").style.clip的字符串值是：

"rect(0, remainingHealth, 90, 0)"

这和在你的 CSS 文件中做的一样：

    #nowbar 
    position: absolute;
    margin-top: -24px;
    margin-left: 5px;
    clip: rect(0, remainingHealth, 90, 0);
    

您可以看到“remainingHealth”不是有效的 CSS，remainingHealth 是您的 javascript 代码中的一个字符串，这是我试图向您展示的，它不是您设置为整数值 333 的 var remainingHealth。

你需要做的：

document.getElementById("nowbar").style.clip = "rect(0," + remainingHealth + "px, 90, 0)";

Javascript 足够“友好”，可以将 int var remainingHealth 转换为字符串值“333”以进行字符串连接。