Изменение параметров средствами js

  1. Weblancer
  2. Форум фрилансеров
  3. Программирование
Тимофей И.
52 сообщения
#18 лет назад
Проблема вот в чем: у меня есть ячейка с параметрами
[code]<td style="background: url(1.gif) 100% no-repeat;">[/code]
Я хочу, чтоб при ширине браузера меньше, чем 452 пикселя эти параметры менялись на
[code]<td style="background: url(earth.gif) 0% no-repeat;">[/code]
Но, увы, недостаточные знания js не позволяют решить проблему самостоятельно.
Может кто знает как это решается?
Гость
400 сообщений
#18 лет назад
[code]<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>[/code]

Вот где-то так вот. Тестить было лень
Михаил В.
2195 сообщений
#18 лет назад
if (body.style.width > 452) {

Это круто.
Тимофей И.
52 сообщения
#18 лет назад
Большой спасибо!!

Окончательный вариант получился таким:

[code]<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>[/code]
Константин Т.
589 сообщений
#18 лет назад
Удивительно, Оперу почему-то все учитывают, а Safari, которого гораздо больше - нет...
Михаил В.
2195 сообщений
#18 лет назад
[code]function init(){
return document.compatMode=='CSS1Compat' && !window.opera?document.documentElement.clientWidth:document.body.clientWidth;
}[/code]
с учетом замечания Pilat66 Авторство: tigir.com
Вадим С.
49 сообщений
#18 лет назад
А зачем ужасная функция init() ?
document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами

[code]var td2 = document.getElementById('mytd');[/code]- это лучше вынести из функции, т.к. при каждом ресайзе будет инициализироваться переменная и искаться mytd, что не есть хорошо

[code]if (init() > 452) ...[/code]
По мне легче читается такой код:
[code]td2.className = iinit() > 452 ? ''wide' : 'slim';[/code]
Михаил В.
2195 сообщений
#18 лет назад
document.body.offsetWidth и document.body.clientWidth поддерживается всеми браузерами

это не соответствует действительности
Вадим С.
49 сообщений
#18 лет назад
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 сообщений
#18 лет назад
Vadyacorp
Я и говорю не о clientWidth, а о document.body. В частности его нет в IE5.*, поддержка которого пока еще диктуется заказчиками.
Вадим С.
49 сообщений
#18 лет назад
Ну это не правда, document.body имеется уже в спецификации HTML 3.2, которую полностью держит IE5 и даже (могу ошибаться) IE4

IE4+ полностью поддерживает document.body.clientWidth и иже с ними
Вадим С.
49 сообщений
#18 лет назад
Михаил В.
2195 сообщений
#18 лет назад
Виноват, я все перепутал и заврался, все совсем наоборот. Относительно document.body.* вы во всем правы.
Извините мою глупость, пойду грызть спецификацию, чтобы не ляпнуть еще какую-нибудь глупость.

А в IE5* нет documentElement.
Нужное значение возвращает все же document.documentElement.clientWidth, только в случае c IE5* это будет document.body.clientWidth.