Как я могу встроить функцию JavaScript в CSS в HTML? - PullRequest
Новая
       0

Как я могу встроить функцию JavaScript в CSS в HTML?

1 голос
/ 12 марта 2012

У меня есть функция 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>

Фоновое изображение не отображается, что я могу сделать, чтобы это исправить?

Спасибо, заранее

Ответы [ 2 ]

5 голосов
/ 12 марта 2012

Не.

Сделайте это правильно.

Присвойте элементу 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 + ')');
1 голос
/ 12 марта 2012

Вы сталкиваетесь с тем, что выполнение скрипта может происходить в 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), сгенерированный случайным образом.

...