Javascript DOM CSS Style cssFloat Property

Introduction

Let an image float to the left/right of the text, when clicking on two buttons:

<!DOCTYPE html>
<html>
<body>

<img id="myImg" src="image1.png" width="100" height="132">

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>

<button type="button" onclick="floatRight()">Float right</button>
<button type="button" onclick="floatLeft()">Float left</button>

<script>
function floatRight() {//  www .  j  a  va 2 s  .co m
  document.getElementById("myImg").style.cssFloat = "right";
}

function floatLeft() {
  document.getElementById("myImg").style.cssFloat = "left";
}
</script>

</body>
</html>

The cssFloat property sets or gets the horizontal alignment of an element.

Property Values

Value	Description
none	not floated. `default`
left	float to the left in the parent element
right	float to the right in the parent element
initial	Sets this property to its default value.
inherit	Inherits this property from its parent element.

The cssFloat property returns a String representing the horizontal alignment of an element.

Previous Next