HTML中的DOM样式clear属性用于设置或获取特定元素相对于浮点数对象的位置。
用法
- 要获得清晰的属性:
object.style.clear
- 设置清除属性:
object.style.clear = "none|left|right|both|initial|inherit"
属性值:
值 | 描述 |
---|---|
left | 不允许元素左侧的浮点数实体 |
right | 不允许元素右侧的浮点数实体 |
both | 不允许在元素的左侧或右侧浮点数实体 |
none | 允许在元素左侧和元素右侧浮点数实体。这是默认设置 |
initial | 将属性的值设置为其默认值。 |
inherit | 继承此属性的值,即设置与父属性相同的值 |
返回值:它返回一个字符串,该字符串表示元素相对于浮点数对象的位置。
示例1:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style clear Property
</title>
<style>
img {
float:left;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png"
width="150" height="150">
<p id="P" style="color:green">
GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
</p>
<button type="button" onclick="myFunction()">
Clear left side of text</button>
<script>
function myFunction() {
document.getElementById(
"P").style.clear = "left";
}
</script>
</body>
</html>
输出:
- 点击前:
- 点击后:
- 点击前:
- 点击后:
- 点击前:
- 点击后:
- 谷歌浏览器
- Edge
- 火狐浏览器
- Opera
- Safari
示例2:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style clear Property
</title>
<style>
img {
float:right;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png"
width="150" height="150">
<p id="P" style="color:green">
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
</p>
<button type="button" onclick="myFunction()">
Clear right side of text</button>
<script>
function myFunction() {
document.getElementById(
"P").style.clear = "right";
}
</script>
</body>
</html>
输出:
示例3:
<!DOCTYPE html>
<html>
<head>
<title>
HTML | DOM Style clear Property
</title>
<style>
img {
float:right;
}
#i {
float:left;
}
</style>
</head>
<body>
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png"
width="150" height="150">
<img id="i" src=
"https://media.geeksforgeeks.org/wp-content/uploads/gfg_200X200.png"
width="150" height="150">
<p id="P" style="color:green">
GEEKSFORGEEKS PARAGRAPH HERE
GEEKSFORGEEKS PARAGRAPH HERE
</p>
<button type="button" onclick="myFunction()">
Clear left and right side of text
</button>
<script>
function myFunction() {
document.getElementById(
"P").style.clear = "both";
}
</script>
</body>
</html>
输出:
支持的浏览器:HTML | DOM样式清除属性如下所示:
相关用法
- HTML Style top用法及代码示例
- HTML Style right用法及代码示例
- HTML Style visibility用法及代码示例
- HTML Style backgroundImage用法及代码示例
- HTML Style minWidth用法及代码示例
- HTML Style flexFlow用法及代码示例
- HTML Style borderLeftStyle用法及代码示例
- HTML Style order用法及代码示例
- HTML Style animationDelay用法及代码示例
- HTML Style columnRule用法及代码示例
- HTML Style animationTimingFunction用法及代码示例
- HTML Style transform用法及代码示例
- HTML Style orphans用法及代码示例
- HTML Style animationName用法及代码示例
- HTML Style perspectiveOrigin用法及代码示例
注:本文由纯净天空筛选整理自EnaMotwani大神的英文原创作品 HTML | DOM Style clear Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。