We can also control the effect of float and clear properties by using JavaScript. Let's create a Web page named float-javascript.html to access float and clear properties by using JavaScript.
<!doctype html>
<head>
<title>clear property </title>
<style type="text/css">
.float
{
float:left clear:left;
}
</style></head>
<body>
<h1>Floating an element Using JavaScript</h1>
<p style="color:pink;background-color:green;">
<img id="float" src="bike.jpg">
This is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.
</p>
<INPUT type="button" onclick="document.getElementById('float').style.float='left'" value="Float Left">
<INPUT type="button" onclick="document.getElementById('float').style.float='right'" value="Float Right">
</body>
</html>
Here: We have added two buttons to change the value of float property of an image element at runtime using the JavaScript code.
The Output of above WebPage :
When we click the float left button ,the float property of the IMG element which display an image of bike , change to left and the text move at the right side of the image, as shown in below :
<!doctype html>
<head>
<title>clear property </title>
<style type="text/css">
.float
{
float:left clear:left;
}
</style></head>
<body>
<h1>Floating an element Using JavaScript</h1>
<p style="color:pink;background-color:green;">
<img id="float" src="bike.jpg">
This is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.This is a paragraph.This is a
paragraph.This is a paragraph.This is a paragraph.This is a paragraph.This
is a paragraph.This is a paragraph.
</p>
<INPUT type="button" onclick="document.getElementById('float').style.float='left'" value="Float Left">
<INPUT type="button" onclick="document.getElementById('float').style.float='right'" value="Float Right">
</body>
</html>
Here: We have added two buttons to change the value of float property of an image element at runtime using the JavaScript code.
The Output of above WebPage :
When we click the float left button ,the float property of the IMG element which display an image of bike , change to left and the text move at the right side of the image, as shown in below :
Now click the float right to change the float property to right. the text moves at the left side of the image as shown in below:
No comments:
Post a Comment