Как я могу встроить функцию javascript в css в html?

Question

У меня есть функция javascript с именем «background_url», которая выводит случайное фоновое изображение.

Я пытаюсь вызвать функцию следующим образом:

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

, но единственное, выдаваемого в моем браузере:

строка «background_url();»

Javascript функция заключается в следующем

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 класс (если его более одного, чем общий фон) или идентификатор (если этот элемент уникален) и используйте JavaScript для установки стиля с помощью соответствующего селектора.

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 + ')'; 
} 

Или, если вы используете библиотеку как JQuery, это немного проще:

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

Answer 2

Дело вы работаете в том, что выполнение сценария может произойти в 2-х местах: внутри . <script> тег (который не может быть в атрибуте или, как часть атрибута, только если это обработчик события так ваш выбор:

<script> 
background_url() 
</script> 

или

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

Или

<td onmouseover="background_url()"> 

Учитывая эти ваши выборы, как правило, люди пытаются использовать второй вариант, то есть вы должны иметь какой-то механизм, чтобы связать свой элемент кода в вопросе. Таким образом, вы можете добавить id в вашем td:

<td id="randomBgElement"> 

Тогда OnLoad это сделать:

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

Где "background_url()" это функция, которая возвращает действительный стиль, как background-image: url(images/img3.jpg) генерируется случайным образом.