자바 스크립트를 사용하여 CSS 스타일 추가

일부 탭이 빈 탭에 표시되는 크롬 확장 프로그램을 만들고있었습니다. 자바 스크립트를 사용하여 페이지에 아이콘을 추가하고 있습니다. 아래 코드 조각은 다음과 같습니다자바 스크립트를 사용하여 CSS 스타일 추가

HTML :

<div id="icons" class="icons"></div>

자바 스크립트 :

function addIcons() { 
    for (var i = 0; i < iconArray.length; i++) { 
    var link = document.createElement('a'); 
    link.href = linkArray[i]; 

    var icon = document.createElement('img'); 
    icon.src = "images/" + iconArray[i]; 
    icon.title = titleArray[i]; 

    link.appendChild(icon); 
    document.getElementById('icons').appendChild(link); 
    } 
    document.getElementById('icons').style.borderBottom="2px solid blue"; 
}

문제는 국경이 아이콘 (경계 아래에 나타납니다!) 위에 표시된다는 점이다. 아무도 원하는 결과를 얻기 위해해야 할 일을 말해 줄 수 있습니까?

출처

2012-05-10 Soumen

Soumen, 당신은 아이콘 아래의 경계를 밀어 패딩이나 마진을 사용하려고 할 수 있습니까? (나는 내가 추측하고있는 것처럼 가장 잘 모르겠다.) 도움이 될 수 있기를 희망한다. 또한 @deadrunk는 좋은 지적입니다. HTML이 유효한지 확인하십시오. – jmort253

방금 코드를 시도했는데 올바르게 작동합니다.

Screenshot : https://skitch.com/runk/83fes, 최신 Chrome.

페이지의 나머지 부분에는 유효한 HTML 마크 업이 있습니까? 문제가 될 수 있습니다.

그리고 js를 통해 CSS 스타일을 설정하지 않을 것을 제안합니다.

<div id="icons" class="icons" style="border-bottom: 2px solid blue"></div>

또는 사용하여 CSS 스타일 태그 (파일)

<style> 
.icons { border-bottom: 2px solid blue } 
</style>

출처

2012-05-10 06:07:49 deadrunk

-2

DOM 요소의 아래쪽 테두리를 설정하려면 http://reference.sitepoint.com/css/border-bottom을 확인하십시오.

출처

2012-05-10 06:04:59 rt2800

링크를 참조하는 대신 여기에 예제를 제공 할 수 있습니까? – Sampson

예 : style.border-bottom-color = "blue"; document.getElementById ('icons'). style.border-bottom = "2px 솔리드 블루"; document.getElementById ('icons'). style.border-bottom-style = "solid"; ' – rt2800

당신의 답을 편집 할 수 있습니다. 거기에 예제를 추가하십시오. – Sampson

자바 스크립트를 사용하여 CSS 스타일 추가

답변

관련 문제