Change HTML element styles with 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>

Change HTML element styles with JavaScript

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (11)

Semelhante a Change HTML element styles with JavaScript

Semelhante a Change HTML element styles with JavaScript (20)

Último

Último (20)

Change HTML element styles with JavaScript