HTML DOM clientLeft 属性
htmlweb developmentfront end technology更新于 2025/9/23 6:04:17
HTML DOM clientLeft 属性返回元素左边框的宽度(以像素为单位)。它是一个只读属性。此属性将包含垂直滚动条的宽度，但永远不会包含元素的左边距或左内边距。
语法
以下是 clientLeft 属性的语法 −
element.clientLeft
示例
让我们来看一个 HTML DOM clientLeft 属性的示例 −
<!DOCTYPE html>
<html>
<head>
<style>
#styleDiv {
height: 200px;
width: 200px;
padding: 5px;
margin: 10px;
border-left: 10px solid blue;
background-color: lightgreen;
}
</style>
</head>
<body>
<p>Click the below button to get border left width in pixels</p>
<button onclick="leftWidth()">LEFT WIDTH</button>
<div id="styleDiv">
</div>
<p id="Sample"></p>
<script>
function leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
}
</script>
</body>
</html>
输出
这将产生以下输出 −
点击左侧宽度 −
在上面的例子中 −
我们创建了一个 id 为 “styleDIV” 的 div，并使用其 id 为其应用了样式。
#styleDiv {
height: 200px;
width: 200px;
padding: 5px;
margin: 10px;
border-left: 10px solid blue;
background-color: lightgreen;
}
<div id="styleDiv">
</div>
然后，我们创建了一个按钮 LEFT WIDTH，当点击 − 时，它将执行 widthDiv() 方法。
<button onclick="widthDiv()"<LEFT WIDTH</button>
leftWidth() 使用 getElementById() 方法获取 <div> 元素并将其赋值给变量 x。然后，使用 <div> 上的 clientLeft 属性获取其左边框宽度，并在添加一些文本后将其赋值给变量 txt。然后，使用段落的 innerHTML 属性并将 txt 变量赋值给它，txt 中的文本将显示在段落内部 −
function leftWidth() {
var x= document.getElementById("styleDiv");
var txt = "Border left width: " + elmnt.clientLeft + "px";
document.getElementById("Sample").innerHTML = txt;
}
相关文章
有用资源
html 参考教程 - 该教程包含有关 html 的更多信息:https://www.cainiaomax.com/html/
