JavaScript DHTML/Style Layout — различия между версиями
Admin (обсуждение | вклад) м (1 версия) |
|
(нет различий)
|
Версия 13:02, 26 мая 2010
- Align
- Background
- Border
- Bounding Client
- Bounds
- Clear
- Client
- Clip
- Color
- Margin
- Offset
- Page
- Rule
- Space
- Units
- Width
- getClientRects
- hasLayout
- height
- left
- lineHeight
- noWrap
- paddingLeft
- paddingTop
- position
- textDecoration
- top
- visibility
Содержание
div.style.fontFamily="Verdana";
<source lang="html4strict">
<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="html4strict">
<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="html4strict">
<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="html4strict">
<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>
Font face
<source lang="html4strict">
<html>
<body>
Sample Text
<button onclick="myElement.face="courier";">Courier Font</button>
<button onclick="myElement.face="arial";">Arial Font</button>
</body>
</html>
</source>
Font size
<source lang="html4strict">
<html> <body> This is a Font size 2 <button onclick="myFont.size = 4;">Make the Size 4</button> </body> </html>
</source>