Admin: 1 версия

2010-05-26T08:24:43Z

1 версия

в 18:52, 25 мая 2010

2010-05-25T18:52:56Z

Новая страница

* [[JavaScript Tutorial/Style/Color | Color]]
* [[JavaScript Tutorial/Style/Computed Style | Computed Style]]
* [[JavaScript Tutorial/Style/backgroundColor | backgroundColor]]
* [[JavaScript Tutorial/Style/border | border]]
* [[JavaScript Tutorial/Style/cssText | cssText]]
* [[JavaScript Tutorial/Style/currentStyle | currentStyle]]
* [[JavaScript Tutorial/Style/display | display]]
* [[JavaScript Tutorial/Style/getPropertyValue | getPropertyValue]]
* [[JavaScript Tutorial/Style/height | height]]
* [[JavaScript Tutorial/Style/item | item]]
* [[JavaScript Tutorial/Style/left | left]]
* [[JavaScript Tutorial/Style/lineHeight | lineHeight]]
* [[JavaScript Tutorial/Style/paddingLeft | paddingLeft]]
* [[JavaScript Tutorial/Style/paddingTop | paddingTop]]
* [[JavaScript Tutorial/Style/pixelLeft | pixelLeft]]
* [[JavaScript Tutorial/Style/pixelTop | pixelTop]]
* [[JavaScript Tutorial/Style/postion | postion]]
* [[JavaScript Tutorial/Style/removeProperty | removeProperty]]
* [[JavaScript Tutorial/Style/setProperty | setProperty]]
* [[JavaScript Tutorial/Style/textDecoration | textDecoration]]
* [[JavaScript Tutorial/Style/top | top]]
* [[JavaScript Tutorial/Style/width | 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>
<div id="div1">
This is a DIV element. Click me to see the change.
</div>
</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>
<div id="div1">
This is a DIV element. Click me to see the change.
</div>
</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>
<div id="div1">
<p>p1</p>
<p>p2</p>
</div>
</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>
<div id="div1">
<p>p1</p>
<p>p2</p>
</div>
</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>

← Предыдущая	Версия 08:24, 26 мая 2010
(нет различий)

JavaScript Tutorial/Style - История изменений

Admin: 1 версия

в 18:52, 25 мая 2010