Home > Web Front-end > JS Tutorial > How to clear the floating label in javascript

How to clear the floating label in javascript

青灯夜游
Release: 2023-01-06 11:18:02
Original
1727 people have browsed it

In javascript, you can use the cssFloat property of the Style object to clear the float of the label. This property sets where the text or image floats in another element. When the value is set to "none", the float can be cleared. , the syntax format is "element object.style.cssFloat="none"".

How to clear the floating label in javascript

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

How to use javascript to clear the floating label?

You can use the cssFloat property of the HTML DOM Style object.

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<style>
#content{
    border:2px solid lime;
}
#left1{
    width:100px;
    height:150px;
    border:5px solid red;
    float:left;
}
#left2{
 
    margin-left:120px;
    
    width:200px;
    height:100px;
   
    background:#ccc;
}
</style>
<script type="text/javascript">
	function deleteFloat()
	{
		document.getElementById("left1").style.cssFloat="none";
		}
	</script>
</head>

<body>
    <div id="content">
        <div id="left1"></div>
        <div id="left2"></div>
    </div> <br />
	<input type="button" onclick="deleteFloat()"value="去除浮动" />
</body>
</html>
Copy after login

Rendering:

How to clear the floating label in javascript

Description:

cssFloat attribute sets the text or image to appear (float) in somewhere in another element.

Syntax:

Object.style.cssFloat=left|right|none
Copy after login
Value Description
left Image or text floats to the left of the parent element.
right The image or text floats to the right of the parent element.
none The image or text float appears at the position where it would appear within the parent element.

[Related recommendations: javascript learning tutorial]

The above is the detailed content of How to clear the floating label in javascript. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template