이 빈 문자열은 무엇을 의미합니까?

<script type="text/javascript"> 

     var step = 4; 

     function expandPanel() 

     { 

      var panel = document.getElementById('panel'); 

      if (panel.clientHeight < (panel.originalHeight-step)) 

      { 

       //clientWidth 

       var h = panel.clientHeight + step; 

       panel.style.height = h+"px"; 

       setTimeout("expandPanel()", 100); 

      } 

      else 

      { 

       panel.style.height = ""; 

       var panelTitle = document.getElementById('panelTitle'); 

       panelTitle.firstChild.nodeValue = 'Collapse'; 



      } 

     } 



     function collapsePanel() 

     { 

      var panel = document.getElementById('panel'); 



      if (panel.clientHeight >= step) 

      { 

       var h = panel.clientHeight - step; 

       panel.style.height = h+"px"; 

       setTimeout("collapsePanel()", 100); 

      } 

      else 

      { 

       panel.style.display = 'none'; 

       var panelTitle = document.getElementById('panelTitle'); 

       panelTitle.firstChild.nodeValue = 'Expand'; 

      } 





     } 



     function changePanel() 

     { 

      var panel = document.getElementById('panel'); 

      if (!panel.style.height || 

       (panel.style.display == 'none')) 

      { 

       if (panel.style.display == 'none') 

       { 

        panel.style.display = ''; 

        expandPanel(); 

       } 

       else 

       { 

        panel.originalHeight = panel.clientHeight; 

        collapsePanel(); 

       } 

      } 

     } 

    </script>

CSS 속성을 통해 height 및 display CSS 속성에 할당 된 빈 문자열이 있습니다. 이 경우 무슨 의미입니까?이 빈 문자열은 무엇을 의미합니까?

출처

2011-10-13 DrStrangeLove

가 왜 그렇게 많은 있나요'각 라인 코드를 분리 newlines'? –

CSS 속성을 모두 지우는 것입니다. 스타일 속성이 전에처럼 보였다 경우

<div style="height: 100px"></div>

지금과 같이 표시됩니다 :

''(빈 문자열) 그들에게 상속 또는 기본 값을 채택 할 수 있도록하기 위해 element.style 속성을 설정

<div style=""></div>

출처

2011-10-13 02:29:22 SoWeLie

그래서 기본값이 사용됩니까 ?? – DrStrangeLove

혼란스러운 속성과 속성이 있습니다. 속성은 존재할 수도 존재하지 않을 수도 있으며 속성과 동일한 값을 가질 수도 있고 그렇지 않을 수도 있습니다. – RobG

기본값 또는 CSS를 통해 상속 된 모든 속성이 사용됩니다. CSS 규칙이 요소에 적용되는지 여부에 따라 다릅니다. @RobG, 스타일 속성은 파이어 폭스의 스타일 속성 자체에서 끝나는 것과 직접적으로 대응합니다. IE가 스타일 태그를 업데이트하지 않는 것처럼 보입니다. – SoWeLie

예를 들어 element.style.display을 빈 문자열로 설정하면 이전에 display = 'none';으로 숨겨진 요소를 표시하는 것이 좋습니다. 이렇게하면 원래 속성이 무엇인지 알 필요가 없습니다. 모든).

일부 브라우저에서는 DOM 속성을 변경하면 관련 HTML 속성이 수정되지만 다른 브라우저에서는 수정되지 않습니다. 또한 속성이 어떻게 설정되는지는 구현에 따라 다릅니다. 그러니 그 행동에 의지하지 말고 단지 성질을 다루십시오.

는 몇 가지 브라우저에서 다음을 시도해보십시오

<div id="d0">div</div> 
<button onclick=" 
    var el = document.getElementById('d0'); 
    el.style.backgroundColor = 'red'; 
    el.style.border = '1px solid blue'; 
    alert(el.getAttribute('style')); 
">Do stuff</button>

파이어 폭스 5 : 배경 색 : 빨강; 국경 : 1px 솔리드 블루;

IE 8 [목적]

크롬 14 배경색 : 레드; border-top-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-left-width : 1px; border-top-style : 솔리드; border-right-style : 솔리드; border-bottom-style : 솔리드; border-left-style : 솔리드; border-top-color : 파란색; border-right-color : 파랑; border-bottom-color : blue; border-left-color : 파랑;

Opera 11 : background-color : # ff0000; border-top-color : # 0000ff; border-left-color : # 0000ff; border-right-color : # 0000ff; border-bottom-color : # 0000ff; border-top-width : 1px; border-left-width : 1px; border-right-width : 1px; border-bottom-width : 1px; border-top-style : 솔리드; border-left-style : 솔리드; border-right-style : 솔리드; 국경 - 하단 스타일 :

출처

2011-10-13 02:39:01 RobG

고체이 예제는 데 도움이 될 것입니다

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title></title> 
     <style> 
      div { 
       height: 45px; 
       width: 45px; 
       border: 1px solid #000; 
       background-color: #ccc 
      } 
     </style> 
     <script> 
      window.addEventListener("DOMContentLoaded", function() { 
       var div = document.getElementsByTagName("div")[0]; 
       alert("That's the default size. Let's change it."); 
       div.style.height = "200px"; 
       div.style.width = "200px"; 
       alert("Let's reset the size back to default."); 
       div.style.height = ""; 
       div.style.width = ""; 
      }, false); 
     </script> 
    </head> 
    <body> 
     <div></div> 
    </body> 
</html>

출처

2011-10-13 02:52:39 Shadow2531

이 빈 문자열은 무엇을 의미합니까?

답변

관련 문제