JavaScript는 CSS 스타일을 설정하고 수정합니다.

구문:
nodeObject.style.cssProperty=newStyle
여기서 nodeObject는 노드 객체이고 cssProperty는 CSS 속성이며 newStyle은 CSS 속성의 값입니다.

참고: "-"로 구분된 CSS 속성의 경우 "-"를 제거하고 "-" 뒤의 첫 번째 문자를 대문자로 표시하세요.

예:

document.getElementById("demo").style.height = "50px" ;
document.getElementById("demo").style.border = " 1px solid #ddd ";
document.getElementById("demo").style.backgroundColor = " #ccc ";
document.getElementById("demo").style.textAlign = " center ";

예: id="demo"로 노드 스타일을 설정합니다.

<style>
#demo{
    height:50px;
    width:250px;
    margin-top:10px;
    text-align:center;
    line-height:50px;
    background-color:#ccc;
    }
</style>
<div id="demo">
    点击这里改变CSS样式
</div>
<script type="text/javascript">
    document.getElementById("demo").onclick=function(){
        this.style.height = " 70px ";
        this.style.lineHeight = " 70px ";
        this.style.backgroundColor = " #000 ";
        this.style.color=" #fff ";
    }
</script>

지속적인 학습

새로운 파일

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> #demo{ height:50px; width:250px; margin-top:10px; text-align:center; line-height:50px; background-color:#ccc; } </style> <div id="demo"> 点击这里改变CSS样式 </div> <script type="text/javascript"> document.getElementById("demo").onclick=function(){ this.style.height = " 70px "; this.style.lineHeight = " 70px "; this.style.backgroundColor = " #000 "; this.style.color=" #fff "; } </script> </head> <body> </body> </html>

코드 재설정

자동운전

제출하다

시사 Clear