Javascript

<!DOCTYPE html>background
<html>
<body>
<h1>Hello World!</h1>
<button onclick="myFunction()">Setbackground</button>
<script>
functionmyFunction() {
document.body.style.background="#f3f3f3 url('img_tree.png') no-repeatrighttop";
}
</script>
</body>
</html>
<!DOCTYPE html>backgroundAttachment
<html>
<head>
<style>
body {
background: #f3f3f3 url('img_tree.png') no-repeatrighttop;
}
</style>
</head>
<body>
<p><b>Tip:</b> Try to to resize the window ifthe scrollbar is not available.</p>
<p><b>Tip:</b> Scroll the page before and after you have clickedthe button.</p>
<button onclick="myFunction()">Setbackgroundimage to be fixed</button>
<br>
<script>
document.body.style.backgroundAttachment="fixed";
}
</script>
<p>Some text to enable scrolling..
<br><br><br><br>
<br><br><br><br>
</p>
</body>
</html>

<!DOCTYPE html>backgroundColor
<html>
<body>
<button type="button" onclick="myFunction()">Setbackground color</button>
<script>
document.body.style.backgroundColor="red";
}
</script>
</body>
</html>
<!DOCTYPE html>backgroundImage
<html>
<body>
<button type="button" onclick="myFunction()">Setbackgroundimage</button>
<script>
document.body.style.backgroundColor="#f3f3f3";
document.body.style.backgroundImage ="url('img_tree.png')";
}
</script>
</body>
</html>
<!DOCTYPE html>backgroundPosition
<html>
<head>
<style>
body {
background-image:url('img_tree.png');
background-repeat:no-repeat;
}
</style>
</head>
<body>
<button type="button" onclick="myFunction()">Positionbackgroundimage</button>

<p>Click the "Try it" button to setthe background-clipproperty of the DIV elementto "content-
box":</p>
<button onclick="myFunction()">Tryit</button>
<div id="myDIV">
Lorem ipsumdolor sit amet, consectetueradipiscingelit,seddiam nonummynibh euismodtincidunt
ut laoreetdolore magna aliquam erat volutpat. Ut wisi enimad minimveniam,quis nostrud exerci
</div>
<script>
document.getElementById("myDIV").style.backgroundClip="content-box";
}
</script>
</body>
</html>
<!DOCTYPE html>backgroundSize
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
width: 300px;
height:300px;
background: url('smiley.gif') no-repeat;
}
</style>
</head>
<body>
<p>Click the "Try it" button to enlarge the background-size of the DIV element:</p>
<div id="myDIV">
<h1>Hello</h1>
</div>
<script>
document.getElementById("myDIV").style.backgroundSize ="60px120px";
}
</script>
</body>
</html>

<!DOCTYPE html>backfaceVisibility
<html>
<head>
<style>
div {
width: 100px;
height:100px;
background: red;
color: white;
-webkit-animation:mymove 2s infinite linearalternate;/* Chrome,Safari, Opera */
animation: mymove 2s infinite linearalternate;
}
/* Chrome,Safari, Opera */
@-webkit-keyframesmymove {
to {-webkit-transform:rotateY(180deg);}
}
@keyframesmymove {
to {transform: rotateY(180deg);}
}
</style>
</head>
<body>
<p>Check/uncheck the checkbox to change the backface-visibilityofthe animated DIV element:</p>
<div id="myDIV">
<h1>Hello</h1>
</div>
<input type="checkbox" onclick="myFunction(this)" checked>backface-visibility
<script>
functionmyFunction(x) {
if(x.checked=== true) {
document.getElementById("myDIV").style.WebkitBackfaceVisibility="visible";//Code for Chrome,
Safari, Opera
document.getElementById("myDIV").style.backfaceVisibility="visible";
} else {
document.getElementById("myDIV").style.WebkitBackfaceVisibility="hidden";// Code for
Chrome,Safari, Opera
document.getElementById("myDIV").style.backfaceVisibility="hidden";
}
}
</script>
<p><strong>Note:</strong> The backface-visibilityandbackfaceVisibilitypropertiesare notsupported
in InternetExplorer9 and earlierversions.</p>

</body>
</html>
<!DOCTYPE html>border
<html>
<body>
<div id="myDiv">Thisisa div element.</div>
<br>
<button type="button" onclick="myFunction()">Setborder</button>
<script>
document.getElementById("myDiv").style.border="thicksolid #0000FF";
}
</script>
</body>
</html>
document.getElementById("myDiv").style.borderBottom="thicksolid#0000FF";
document.getElementById("myDiv").style.borderBottomColor="red";
<!DOCTYPE html>borderBottomLeftRadius
<html>
<head>
<style>
#myDIV {
width: 300px;
height:300px;
}
</style>
</head>
<body>
<p>Click the "Try it" button to change the border-bottom-left-radiuspropertyofthe DIV
element:</p>
<div id="myDIV">
<h1>Hello</h1>
</div>
<script>
document.getElementById("myDIV").style.borderBottomLeftRadius="25px";
document.getElementById("myDIV").style.borderBottomLeftRadius="25px";

}
</script>
</body>
</html>
<!DOCTYPE html>borderBottomStyle
<html>
<body>
<div id="myDiv">Thisisa div.</div>
<br>
<button type="button" onclick="myFunction()">Setsolidbottomborder</button>
<script>
document.getElementById("myDiv").style.borderBottomStyle="solid";
}
</script>
</body>
</html>
<!DOCTYPE html>borderBottomWidth
<html>
<head>
<style>
#myDiv {
border-style:solid;
}
</style>
</head>
<body>
<div id="myDiv">Thisisa div element.</div>
<br>
<button type="button" onclick="myFunction()">Change widthofthe bottom border</button>
<script>
document.getElementById("myDiv").style.borderBottomWidth="10px";
}
</script>
</body>
</html>

<!DOCTYPE html>borderCollapse
<html>
<body>
<table id="myTable" border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$150</td>
</tr>
</table>
<br>
<button type="button" onclick="myFunction()">Collapseborder</button>
<script>
document.getElementById("myTable").style.borderCollapse ="collapse";
}
</script>
</body>
</html>
<!DOCTYPE html>borderColor
<html>
<head>
<style>
#myDiv {
border: thick solidblue;
}
</style>
</head>
<body>
<div id="myDiv">Thisisa div.</div>
<br>
<button type="button" onclick="myFunction()">Change colorofthe four borders</button>
<script>
document.getElementById("myDiv").style.borderColor="red";
}
</script>
</body>
</html>

<!DOCTYPE html>borderColor
<html>
<head>
<style>
#myDIV {
border: 15px solidtransparent;
width: 250px;
padding: 10px 20px;
-webkit-border-image:url(border.png) 3030 stretch; /* Safari 5 */
-o-border-image:url(border.png) 3030 stretch; /* Opera 12 */
border-image:url(border.png) 30 30 stretch;
}
</style>
</head>
<body>
<p>Click the "Try it" button to change the border-image propertyof the DIV element:</p>
<div id="myDIV">
<h1>Hello</h1>
</div>
<script>
document.getElementById("myDIV").style.WebkitBorderImage ="url(border.png) 30 30 round"; /*
Code for Safari 5 */
document.getElementById("myDIV").style.OBorderImage ="url(border.png) 30 30 round"; /* Code
for Opera 12 */
document.getElementById("myDIV").style.borderImage ="url(border.png) 3030 round";
}
</script>
</body>
</html>
<!DOCTYPE html>boxShadow
<html>
<head>
<style>
#myDIV {
position:absolute;
width: 100px;
height:100px;
color: white;
}
</style>
</head>

<body>
<p>Click the "Try it" button to setthe boxShadow property of the DIV element:</p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
document.getElementById("myDIV").style.boxShadow="10px 20px 30px lightblue";
}
</script>
</body>
</html>
<!DOCTYPE html>display
<html>
<head>
<style>
#myDIV {
width: 500px;
height:500px;
background-color: lightblue;
}
</style>
</head>
<body>
<p>Click the "Try it" button to setthe displayproperty of the DIV elementto"none":</p>
<div id="myDIV">
This is my DIV element.
</div>
<p><b>Note:</b> The elementwill nottake up any space whenthe displayproperty set to
"none".</p>
<script>
document.getElementById("myDIV").style.display="none";
}
</script>
</body>
</html>

<!DOCTYPE html>Style cursor Property
<html>
<body>
<p id="myP">Mouse overthis textbefore and after you have clickedthe button below!</p>
<button type="button" onclick="myFunction()">Change cursor</button>
<script>
document.getElementById("myP").style.cursor= "pointer";
}
</script>
</body>
</html>
<!DOCTYPE html>font
<html>
<body>
<p id="myP">Thisis a paragraph.</p>
<button type="button" onclick="myFunction()">Setfont</button>
<script>
document.getElementById("myP").style.font="italicbold 20px arial,serif";
}
</script>
</body>
</html>
document.getElementById("myP").style.fontFamily="Impact,Charcoal,sans-serif";
document.getElementById("myP").style.fontFamily="Impact,Charcoal,sans-serif";
document.getElementById("myP").style.fontSize ="xx-large";
document.getElementById("myP").style.fontStyle="italic";
document.getElementById("myP").style.fontVariant="small-caps";
document.getElementById("myBtn").style.height="50px";
document.getElementById("main".style.justifyContent="space-between";
document.getElementById("myBtn").style.left="100px";
document.getElementById("myP").style.letterSpacing="15px";

document.getElementById("myDiv").style.lineHeight="3";
document.getElementById("myList").style.listStyle ="decimal inside";
document.getElementById("myList").style.listStyleImage="url('sqorange.gif')";
document.getElementById("myDiv").style.margin="50px 10px 20px 30px";
document.getElementById("myDiv").style.marginBottom="50px";
<!DOCTYPE html>overflow
<html>
<head>
<style>
#myDIV {
width: 300px;
height:210px;
overflow:visible;
}
</style>
</head>
<body>
<p>Click the "Try it" button to change the overflowproperty ofthe DIV element:</p>
<div id="myDIV">
Lorem ipsumdolor sit amet, consectetueradipiscingelit,seddiam nonummynibh euismodtincidunt
ut laoreetdolore magna aliquam erat volutpat. Ut wisi enimad minimveniam,quis nostrud exerci
type extra
</div>
<script>
document.getElementById("myDIV").style.overflow="scroll";
}
</script>
</body>
</html>
document.getElementById("myDIV").style.overflowX="scroll";
document.getElementById("myDIV").style.overflowX="scroll";
document.getElementById("myDiv").style.padding="50px 10px 20px 30px";
<!DOCTYPE html> Transform
<html>
<head>
<style>
#myDIV {
margin: auto;

width: 200px;
height:100px;
color: white;
}
</style>
</head>
<body>
<p>Click the "Try it" button to rotate the DIV element:</p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
// Code for Chrome, Safari, Opera
document.getElementById("myDIV").style.WebkitTransform="rotate(20deg)";
// Code for IE9
document.getElementById("myDIV").style.msTransform="rotate(20deg)";
// Standard syntax
document.getElementById("myDIV").style.transform="rotate(20deg)";
}
</script>
</body>
</html>
<!DOCTYPE html>transitionTimingFunction
<html>
<head>
<style>
#myDIV {
width: 270px;
height:200px;
overflow:auto;
-webkit-transition:all 2s; /* For Safari 3.1 to 6.0 */
transition: all 2s;
}
#myDIV:hover {
width: 570px;
height:500px;
padding: 100px;

border-radius:50px;
}
</style>
</head>
<body>
<p>Mouse overthe DIV elementand it will change,gradually, both in color and size!</p>
<p>Click the "Try it" button and mouse over the DIV elementagain. The changes will now happen ina
linearspeedcurve.</p>
<div id="myDIV">
<h1>myDIV</h1>
</div>
<script>
document.getElementById("myDIV").style.WebkitTransitionTimingFunction="linear";// Code for
Safari 3.1 to 6.0
document.getElementById("myDIV").style.transitionTimingFunction ="linear"; // Standard
syntax
}
</script>
<p><strong>Note:</strong> The transitionTimingFunctionpropertyis supportedin InternetExplorer
10, Firefox,Opera,and Chrome.</p>
<p>Safari supports an alternative,the WebkitTransitionTimingFunctionproperty.</p>
</body>
</html>

Javascript

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (11)

Similar to Javascript

Similar to Javascript (20)

Recently uploaded

Recently uploaded (20)

Javascript