|
HTML
Javascript
Flash Actionscript
PHP
mySQL
ASP
MS-SQL
Linux
Others
Ziwoo Board
Portfolio
About
|
 |
 Javascript |
| 작성 |
2011-12-15 11:40:19 추천: 74 조회: 26043 |
| 제목 |
자바스크립트로 스타일 제어하기 |
| 이름(ID) |
지우 (ziwoo)
|
|
 |
[예제1]
<head>
<style id="myStyle">
.red {
color: red;
}
</style>
<script type="text/javascript">
function GetSelector () {
var styleTag = document.getElementById ("myStyle");
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
// the first rule in the style sheet
var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
var firstRule = rules[0];
alert (firstRule.selectorText);
}
</script>
</head>
<body>
<button onclick="GetSelector ()">Get the selector component!</button>
<br /><br />
<div class="red">red division</div>
<div>non-red division</div>
<span class="red">red span</span>
</body>
[예제2]
<head>
<style id="myStyle">
.red {
color: red;
}
</style>
<script type="text/javascript">
function ChangeRedColor () {
var styleTag = document.getElementById ("myStyle");
// the style sheet in the style tag
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
// the first rule in the style sheet
var rules = sheet.cssRules ? sheet.cssRules : sheet.rules;
var firstRule = rules[0];
// change the color
firstRule.style.color = "#00ff00";
}
</script>
</head>
<body>
<button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
<br /><br />
<div class="red">red division</div>
<div>non-red division</div>
<span class="red">red span</span>
</body>
[예제3]
<head>
<link id="myLink" rel="stylesheet" type="text/css" href="red.css" />
<script type="text/javascript">
function ChangeRedColor () {
var linkTag = document.getElementById ("myLink");
// the imported style sheet
var importedSheet = linkTag.sheet ? linkTag.sheet : linkTag.styleSheet;
// the first rule in the style sheet
var rules = importedSheet.cssRules ? importedSheet.cssRules : importedSheet.rules;
var firstRule = rules[0];
// change the color
firstRule.style.color = "#00ff00";
}
</script>
</head>
<body>
<button onclick="ChangeRedColor ()">Change the color of the '.red' style rule!</button>
<br /><br />
<div class="red">red division</div>
<div>non-red division</div>
<span class="red">red span</span>
</body>
|
|
|
|
|
|
|
Contact Phone Number
