JavaScript Tutorial/Style
- Color
- Computed Style
- backgroundColor
- border
- cssText
- currentStyle
- display
- getPropertyValue
- height
- item
- left
- lineHeight
- paddingLeft
- paddingTop
- pixelLeft
- pixelTop
- postion
- removeProperty
- setProperty
- textDecoration
- top
- width
Содержание
div.style.fontFamily="Verdana";
<source lang="javascript">
<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> document.onclick=changeElement; function changeElement() {
var div = document.getElementById("div1"); div.style.backgroundColor="#00f"; div.style.width="500px"; div.style.color="#fff"; div.style.height="200px"; div.style.paddingLeft="50px"; div.style.paddingTop="50px"; div.style.fontFamily="Verdana"; div.style.fontSize="2em"; div.style.border="3px dashed #ff0"; div.style.position="absolute"; div.style.left="200px"; div.style.top="100px"; div.style.textDecoration="underline";
} </script> </head> <body>
This is a DIV element. Click me to see the change.
</body> </html></source>
div.style.fontSize="2em";
<source lang="javascript">
<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> document.onclick=changeElement; function changeElement() {
var div = document.getElementById("div1"); div.style.backgroundColor="#00f"; div.style.width="500px"; div.style.color="#fff"; div.style.height="200px"; div.style.paddingLeft="50px"; div.style.paddingTop="50px"; div.style.fontFamily="Verdana"; div.style.fontSize="2em"; div.style.border="3px dashed #ff0"; div.style.position="absolute"; div.style.left="200px"; div.style.top="100px"; div.style.textDecoration="underline";
} </script> </head> <body>
This is a DIV element. Click me to see the change.
</body> </html></source>
div.style.fontSize="larger";
<source lang="javascript">
<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> function bigger() {
var div = document.getElementById("div1"); div.style.fontSize="larger"; div.style.letterSpacing="10px"; div.style.textAlign="justify"; div.style.textTransform="uppercase"; div.style.fontSize="xx-large"; div.style.fontWeight="900"; div.style.lineHeight="40px";
} function smaller() {
var div = document.getElementById("div1"); div.style.fontSize="smaller"; div.style.letterSpacing="normal"; div.style.textAlign="left"; div.style.textTransform="none"; div.style.fontSize="medium"; div.style.fontWeight="normal"; div.style.lineHeight="normal";
} </script> </head> <body> <a href="javascript:bigger();">bigger</a> <a href="javascript:smaller();">smaller</a>
p1
p2
</body> </html></source>
div.style.fontWeight="900";
<source lang="javascript">
<html> <head> <title>PrettyPretty</title> <script type="text/javascript"> function bigger() {
var div = document.getElementById("div1"); div.style.fontSize="larger"; div.style.letterSpacing="10px"; div.style.textAlign="justify"; div.style.textTransform="uppercase"; div.style.fontSize="xx-large"; div.style.fontWeight="900"; div.style.lineHeight="40px";
} function smaller() {
var div = document.getElementById("div1"); div.style.fontSize="smaller"; div.style.letterSpacing="normal"; div.style.textAlign="left"; div.style.textTransform="none"; div.style.fontSize="medium"; div.style.fontWeight="normal"; div.style.lineHeight="normal";
} </script> </head> <body> <a href="javascript:bigger();">bigger</a> <a href="javascript:smaller();">smaller</a>
p1
p2
</body> </html></source>
Set font color with form control
<source lang="javascript">
<html> <head>
<script type="text/javascript"> function showWindow() { var txt = document.form1.stringField.value; var clr = ""; clr = document.form1.colorList.options[document.form1.colorList.options.selectedIndex].text; txt = txt.fontcolor(clr); objWindow = window.open("", "","width=600,height=300"); objWindow.document.write(txt); objWindow.document.close(); } </script>
</head> <body>
<form method="post" name="form1" action="null"> String:<input type="text" size="40" maxlength="256" name="stringField" /> Color: <select name="colorList" size="1"> <option selected="selected">black</option> <option>green</option> <option>red</option> </select> <input type="button" name="Show" value="Show" onclick="showWindow()" /> </form>
</body> </html></source>
Set font size with form control
<source lang="javascript">
<html> <head>
<script type="text/javascript"> function showWindow() { var txt = document.form1.stringField.value; var sze = ""; sze = document.form1.sizeList.options[document.form1.sizeList.options.selectedIndex].text; txt = txt.fontsize(sze); objWindow = window.open("", "","width=600,height=300"); objWindow.document.write(txt); objWindow.document.close(); } </script>
</head> <body>
<form method="post" name="form1" action="null"> String:<input type="text" size="40" maxlength="256" name="stringField" /> Size: <select name="sizeList" size="1"> <option selected="selected">1</option> <option>2</option> <option>3</option> <option>4</option> <option>5</option> <option>6</option> <option>7</option> </select> <input type="button" name="Show" value="Show" onclick="showWindow()" /> </form>
</body> </html></source>