鍍金池/ 問答/Linux  HTML/ 為何不能將這個行內css寫在 style里面？

為何不能將這個行內css寫在 style里面？

有一段輪播的代碼

html的body部分

<body>
    <div id = "container">
        <div id = "list" style="left:-600px;">
            <img src="image/i1.png" alt="" />
            <img src="image/i2.png" alt="" />
            <img src="image/i3.png" alt="" />
            <img src="image/i4.png" alt="" />
            <img src="image/i5.png" alt="" />
            <img src="image/i1.png" alt="" />
            <img src="image/i2.png" alt="" />  
        </div>
        <div id = "buttons">
            <span index="1" class="on"></span>
            <span index="2"></span>
            <span index="3"></span>
            <span index="4"></span>
            <span index="5"></span>
        </div>
        <p id="prev" class="arrow" >&lt;</p>
        <p id="next" class="arrow" >&gt;</p>
    </div>
</body>

我發(fā)現(xiàn)把這個 <div id = "list" style="left:-600px;"> 里面的style拿走，寫到css部分里面去就不行，不知道為何？

可以正常運行的html全部。

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0; padding: 0; text-decoration: none; 
             }
            body{
                padding:20px;
            }
            #container{
                width:600px; height:392px; border:3px solid #333; overflow: hidden; position:relative;margin:0 auto; 
            }
            #list{
                width: 4200px; height: 400px; position: absolute; z-index: 1;
            }
            #list img{
                float:left;width:600px;height:392px;
            }
            #buttons{
                position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
            }
            #buttons span{
                cursor: pointer; float: left; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;
            }
            #buttons .on{
                background: orange;
            }
            .arrow{
                cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; 
            }
            .arrow:hover{
                background-color: RGBA(0,0,0,.7);
            }
            #container:hover .arrow{
                display:block;
            }
            #prev{
                left:20px;
            }
            #next{
                right: 20px;
            }
        
        </style>
        <script type="text/javascript">
        
            window.onload = function (){
                var container = document.getElementById('container');
                var list = document.getElementById('list');
                var buttons = document.getElementById('buttons').getElementsByTagName('span');
                var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                var index = 1;
                var changed = false;
                var timer;

                function showButton(){
                    for(var i = 0;i < buttons.length; i++){
                        if (buttons[i].className == 'on'){
                            buttons[i].className = '';
                            break;
                        }
                    }
                    buttons[index - 1].className = 'on';
                }

                function change(offset){
                    changed = true;
                    var newleft = parseInt(list.style.left) + offset;

                    var time = 300;
                    var interval = 10;
                    var speed = offset/(time/interval);

                    function go(){
                        if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
                             list.style.left = parseInt(list.style.left) + speed + 'px';
                               setTimeout(go,interval);
                        }
                    else{
                    changed = false;
                    list.style.left = newleft + 'px';

                    if(newleft > -600){
                        list.style.left = -3000 + 'px';
                    }
                    if(newleft < -3000){
                        list.style.left = -600 + 'px';
                        }
                      }
                    }
                    go();
                }

                function play(){
                    timer = setInterval(function(){
                        next.onclick();
                    },3000);
                }

                function stop(){
                    clearInterval(timer);
                }

                next.onclick = function() {
                    if(index == 5){
                        index = 1;
                    }
                    else{
                        index += 1;
                    }
                    showButton();
                    if(!changed){
                        change(-600);
                    }
                }

                prev.onclick = function() {
                    if(index == 1){
                        index = 5;
                    }
                    else{
                        index -= 1;
                    }
                    showButton();
                    if(!changed){
                        change(600);
                    }
                }

                
                for(var i =0; i <buttons.length; i++){
                    buttons[i].onclick = function(){
                        
                        if(this.classname == 'on'){
                            return;
                        }
                        
                       var myindex = parseInt(this.getAttribute('index'));
                       var offset = -600 * (myindex - index);

                       index = myindex;
                       showButton();
                       if(!changed){
                        change(offset);
                       } 
                    }
                }
                container.onmouseover = stop;
                container.onmouseout = play;

                play();
            }

        
        </script>

    </head>
    <body>
        <div id = "container">
            <div id = "list" style="left:-600px;">
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />
                <img src="image/i3.png" alt="" />
                <img src="image/i4.png" alt="" />
                <img src="image/i5.png" alt="" />
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />  
            </div>
            <div id = "buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <p id="prev" class="arrow" >&lt;</p>
            <p id="next" class="arrow" >&gt;</p>
        </div>
    </body>
</html>

不可以運行的html全部

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{ 
                margin: 0; padding: 0; text-decoration: none; 
             }
            body{
                padding:20px;
            }
            #container{
                width:600px; height:392px; border:3px solid #333; overflow: hidden; position:relative;margin:0 auto; 
            }
            #list{
                width: 4200px; height: 400px; position: absolute; z-index: 1; left:-600px;
            }
            #list img{
                float:left;width:600px;height:392px;
            }
            #buttons{
                position: absolute; height: 10px; width: 100px; z-index: 2; bottom: 20px; left: 250px;
            }
            #buttons span{
                cursor: pointer; float: left; border:1px solid #fff; width: 10px; height: 10px; border-radius: 50%; background: #333; margin-right: 5px;
            }
            #buttons .on{
                background: orange;
            }
            .arrow{
                cursor: pointer; display: none; line-height: 30px; text-align: center; font-size: 36px; font-weight: bold; width: 40px; height: 40px; position: absolute; z-index: 2; top: 180px; background-color: RGBA(0,0,0,.5); color:white; 
            }
            .arrow:hover{
                background-color: RGBA(0,0,0,.7);
            }
            #container:hover .arrow{
                display:block;
            }
            #prev{
                left:20px;
            }
            #next{
                right: 20px;
            }
        
        </style>
        <script type="text/javascript">
        
            window.onload = function (){
                var container = document.getElementById('container');
                var list = document.getElementById('list');
                var buttons = document.getElementById('buttons').getElementsByTagName('span');
                var prev = document.getElementById('prev');
                var next = document.getElementById('next');
                var index = 1;
                var changed = false;
                var timer;

                function showButton(){
                    for(var i = 0;i < buttons.length; i++){
                        if (buttons[i].className == 'on'){
                            buttons[i].className = '';
                            break;
                        }
                    }
                    buttons[index - 1].className = 'on';
                }

                function change(offset){
                    changed = true;
                    var newleft = parseInt(list.style.left) + offset;

                    var time = 300;
                    var interval = 10;
                    var speed = offset/(time/interval);

                    function go(){
                        if((speed < 0 && parseInt(list.style.left) > newleft)||(speed > 0 && parseInt(list.style.left) < newleft)){
                             list.style.left = parseInt(list.style.left) + speed + 'px';
                               setTimeout(go,interval);
                        }
                    else{
                    changed = false;
                    list.style.left = newleft + 'px';

                    if(newleft > -600){
                        list.style.left = -3000 + 'px';
                    }
                    if(newleft < -3000){
                        list.style.left = -600 + 'px';
                        }
                      }
                    }
                    go();
                }

                function play(){
                    timer = setInterval(function(){
                        next.onclick();
                    },3000);
                }

                function stop(){
                    clearInterval(timer);
                }

                next.onclick = function() {
                    if(index == 5){
                        index = 1;
                    }
                    else{
                        index += 1;
                    }
                    showButton();
                    if(!changed){
                        change(-600);
                    }
                }

                prev.onclick = function() {
                    if(index == 1){
                        index = 5;
                    }
                    else{
                        index -= 1;
                    }
                    showButton();
                    if(!changed){
                        change(600);
                    }
                }

                
                for(var i =0; i <buttons.length; i++){
                    buttons[i].onclick = function(){
                        
                        if(this.classname == 'on'){
                            return;
                        }
                        
                       var myindex = parseInt(this.getAttribute('index'));
                       var offset = -600 * (myindex - index);

                       index = myindex;
                       showButton();
                       if(!changed){
                        change(offset);
                       } 
                    }
                }
                container.onmouseover = stop;
                container.onmouseout = play;

                play();
            }

        
        </script>

    </head>
    <body>
        <div id = "container">
            <div id = "list">
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />
                <img src="image/i3.png" alt="" />
                <img src="image/i4.png" alt="" />
                <img src="image/i5.png" alt="" />
                <img src="image/i1.png" alt="" />
                <img src="image/i2.png" alt="" />  
            </div>
            <div id = "buttons">
                <span index="1" class="on"></span>
                <span index="2"></span>
                <span index="3"></span>
                <span index="4"></span>
                <span index="5"></span>
            </div>
            <p id="prev" class="arrow" >&lt;</p>
            <p id="next" class="arrow" >&gt;</p>
        </div>
    </body>
</html>

兩段代碼僅僅有一處不同。

可以正常運行的html文件
style 部分

           #list{
                width: 4200px; height: 400px; position: absolute; z-index: 1;  }

body部分

            <div id = "list" style="left:-600px;">

不能正常運行html文件

style 部分

           #list{
                width: 4200px; height: 400px; position: absolute; z-index: 1;  left:-600px;}

body部分

            <div id = "list">

其他部分完全相同，請問，這是為何？

回答
編輯回答
孤星

list.style.left獲取的是行內樣式的left值，你一開始list行內樣式的left就為undefined，后面和新的left值怎么相加都是NaN,所以你設置不了新的left值，你在chage函數打印list.style.left的值就知道了。

2018年5月1日 22:52
編輯回答
款爺

開始以為是權重問題

不過瀏覽了下發(fā)現(xiàn)有這樣的代碼:

list.style.left

看下這個: 三、getComputedStyle與style的區(qū)別

2017年2月19日 04:40