Изменение параметров средствами js
52 сообщения
#17 лет назад
Проблема вот в чем: у меня есть ячейка с параметрами<td style="background: url(1.gif) 100% no-repeat;">
Я хочу, чтоб при ширине браузера меньше, чем 452 пикселя эти параметры менялись на
<td style="background: url(earth.gif) 0% no-repeat;">
Но, увы, недостаточные знания js не позволяют решить проблему самостоятельно.
Может кто знает как это решается?
400 сообщений
#17 лет назад
<html>
<head>
<style type="text/css">
td.wide { background: url(1.gif) 100% no-repeat; }
td.slim { background: url(earth.gif) 0% no-repeat; }
<style>
<script type="text/javascript">
bodyResize = function(body) {
var td = document.getElementById('mytd');
if (body.style.width > 452) {
td.className = 'wide';
} else {
td.className = 'slim';
}
}
</script>
</head>
<body onresize="bodyResize(this);">
<!-- ... -->
<td class="wide" id="mytd">
<!-- ... -->
</body>
</html>
Вот где-то так вот. Тестить было лень
2195 сообщений
52 сообщения
#17 лет назад
Большой спасибо!!Окончательный вариант получился таким:
<html>
<head>
<style type="text/css">
td.wide { background: url(1.gif) 100% no-repeat; }
td.slim { background: url(earth.gif) 0% no-repeat; }
</style>
<script type="text/javascript">
function wre() {
var td2 = document.getElementById('mytd');
if (init() > 452) {
td2.className = 'wide';
} else {
td2.className = 'slim';
}
}
N=window.navigator.appName.substring(0,8);
function init() {
if(N=="Microsof" ){w=document.body.clientWidth;}
if(N=="Netscape" ){w=window.innerWidth;}
if(N=="Opera" ){w=window.innerWidth;};
return(w);
}
</script>
</head>
<body onload="wre();" onResize="wre();">
<!-- ... -->
<td class="wide" id="mytd">
<!-- ... -->
</body>
</html>
589 сообщений
#17 лет назад
Удивительно, Оперу почему-то все учитывают, а Safari, которого гораздо больше - нет...
2195 сообщений
#17 лет назад
function init(){
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}с учетом замечания Pilat66
Авторство: tigir.com
49 сообщений
#17 лет назад
А зачем ужасная функция init() ? document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами
var td2 = document.getElementById('mytd');- это лучше вынести из функции, т.к. при каждом ресайзе будет инициализироваться переменная и искаться mytd, что не есть хорошоif (init() > 452) ...
По мне легче читается такой код:
td2.className = iinit() > 452 ? ''wide' : 'slim';
2195 сообщений
#17 лет назад
Цитата:document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами
это не соответствует действительности
49 сообщений
#17 лет назад
HTMLElement (HTML DOM Level 2) думает иначе:clientWidth IE 4.0+ | Mozilla 1.0+ | Netscape 7.0+ | Opera 7.0+ | Safari 1.0+
offsetWidth IE 4.0+ | Mozilla 1.0+ | Netscape 6.0+ | Opera 7.0+ | Safari 1.0+
Другое дело, что это не будет работать для window, а для document.body пройдет на ура. Но здесь window и не требуется, можно обойтись только document.body
2195 сообщений
#17 лет назад
VadyacorpЯ и говорю не о clientWidth, а о document.body. В частности его нет в IE5.*, поддержка которого пока еще диктуется заказчиками.
49 сообщений
#17 лет назад
Ну это не правда, document.body имеется уже в спецификации HTML 3.2, которую полностью держит IE5 и даже (могу ошибаться) IE4IE4+ полностью поддерживает document.body.clientWidth и иже с ними
2195 сообщений
#17 лет назад
Виноват, я все перепутал и заврался, все совсем наоборот. Относительно document.body.* вы во всем правы.Извините мою глупость, пойду грызть спецификацию, чтобы не ляпнуть еще какую-нибудь глупость.
А в IE5* нет documentElement.
Нужное значение возвращает все же document.documentElement.clientWidth, только в случае c IE5* это будет document.body.clientWidth.