어떻게 CSS에서 html로 javascript 함수를 포함 할 수 있습니까?

Question

"background_url"이라는 javascript 함수를 사용하여 임의의 배경 이미지를 출력합니다.

나는이 방법으로 함수를 호출하기 위해 노력하고있어 :

<td style="<script type="text/javascript">background_url();</script>"></td> 

하지만 내 브라우저에서 출력되는 유일한 방법은 다음과 같습니다

문자열 "background_url();" 난 그 해결하기 위해 수행 할 수있는 배경 이미지는 도시하지 않은

function background_url(){ 

var myimages=new Array() 
myimages[1]="images/img1.jpg" 
myimages[2]="images/img2.jpg" 
myimages[3]="images/img3.jpg" 
//call a random function that returns id of image etc    
    document.write('background-image: url('+myimages[id]+')'); 
} 
     </script> 

을 다음과 같이

자바 스크립트 함수인가?

미리 감사드립니다.

Answer 1

하지 마십시오.

올바른 방법으로하십시오.

td 요소에 배경을 공유하는 클래스가 여러 개있는 경우 클래스 또는 id (이 요소가 고유 한 경우)를 지정하고 JavaScript를 사용하여 적절한 선택기를 사용하여 스타일을 설정합니다.

$('td.some-class-name').css('background-image','url(' + randomImageUrl + ')'); 

Answer 2

당신이로 실행중인 것은 그 스크립트 실행 2 곳에서 발생할 수있다 : 당신이 jQuery를 같은 라이브러리를 사용하는 경우

var tds = document.querySelectorAll('td.some-class-name'); 
for(var i = 0; i < tds.length; i++){ 
    var td = tds[i]; 
    td.style.backgroundImage = 'url(' + randomImageUrl + ')'; 
} 

은 또는, 그것은 조금 쉽게 돌며 .이 이벤트 핸들러의 경우에만 속성의 일부로서, 속성에있을 수 없거나 <script> 태그 (그래서 당신의 선택은 다음과 같습니다

<script> 
background_url() 
</script> 

또는

<script src="path/to/your/script.js"></script> 

또는 그 당신의 선택 감안할 때

<td onmouseover="background_url()"> 

은, 일반적으로 사람들은 문제의 코드에 요소를 연결하는 몇 가지 메커니즘이 있어야합니다 의미, 두 번째 옵션을 사용하려고합니다. 그래서 당신은 당신의 td에 id을 추가 할 수 있습니다 :

<td id="randomBgElement"> 

그런 다음 온로드 이렇게 :

"background_url()"

document.getElementById('randomBgElement').style = background_url() 

는 background-image: url(images/img3.jpg)가 무작위로 생성과 같은 유효한 스타일을 반환하는 함수입니다.