Javascript-форум (https://javascript.ru/forum/)
-   Общие вопросы Javascript (https://javascript.ru/forum/misc/)
-   -   document.body.style.backgroundColor onclick (https://javascript.ru/forum/misc/29004-document-body-style-backgroundcolor-onclick.html)

Hekumok 10.06.2012 22:25

document.body.style.backgroundColor onclick
 
почему в этом скрипте при третем нажатии на кнопку ничего не происходит (первые два нажатия работают норм):
function color() {
if (document.body.style.backgroundColor == '') return document.body.style.backgroundColor='#f00';
if (document.body.style.backgroundColor = '#f00') return document.body.style.backgroundColor='#0f0';
if (document.body.style.backgroundColor = '#0f0') return document.body.style.backgroundColor='#f00';
} ;

Кнопка:
<input onclick="color();" value="Жми" type="button">

lord2kim 10.06.2012 22:54

Цитата:

Сообщение от Hekumok (Сообщение 180682)
почему в этом скрипте при третем нажатии на кнопку ничего не происходит (первые два нажатия работают норм):
function color() {
if (document.body.style.backgroundColor == '') return document.body.style.backgroundColor='#f00';
if (document.body.style.backgroundColor = '#f00') return document.body.style.backgroundColor='#0f0';
if (document.body.style.backgroundColor = '#0f0') return document.body.style.backgroundColor='#f00';
} ;

Кнопка:
<input onclick="color();" value="Жми" type="button">

ну я бы поставил для начала знак "==" в условиях вместо "="...вроде после етого усе робит)

Hekumok 10.06.2012 23:01

Цитата:

Сообщение от lord2kim (Сообщение 180687)
ну я бы поставил для начала знак "==" в условиях вместо "="...вроде после етого усе робит)

Уже пробовал, но всё равно попробовал еще раз - не работает

lord2kim 10.06.2012 23:11

Цитата:

Сообщение от Hekumok (Сообщение 180691)
Уже пробовал, но всё равно попробовал еще раз - не работает

хм...странно...в IE то пашет...

devote 10.06.2012 23:13

Цитата:

Сообщение от Hekumok
Уже пробовал, но всё равно попробовал еще раз - не работает

некоторые браузеры конвертируют цветовые значения в то состояние с которым им удобно, допусти при назначении цвета для элемента таким образом:
<body>
<script>
document.body.style.backgroundColor = '#f00';
// сконвертит его в rgb(255, 0, 0)
alert( document.body.style.backgroundColor ); // увидим rgb(255, 0, 0)
</script>
</body>
то есть я тестил в опере, в других браузерах может быть иначе.

devote 10.06.2012 23:14

Цитата:

Сообщение от lord2kim
хм...странно...в IE то пашет...

вот ИЕ то как раз таки не меняет значение на то что ему удобнее. Хотя и не факт, может для него HEX и есть удобно

Deff 10.06.2012 23:18

Можно текущую поллитру своять
<div style=position:absolute;z-index:-120;">
<span id=color1 style="background-color:#FF0000">a</span>
<span id=color2 style="background-color:#0000FF">a</span>
<span id=color3 style="background-color:#00FF00">a</span>
</div>
<script type="text/javascript">
var color=[];
color.push(document.getElementById('color1').style.backgroundColor)
color.push(document.getElementById('color2').style.backgroundColor)
color.push(document.getElementById('color3').style.backgroundColor)
</script>

Hekumok 10.06.2012 23:25

Цитата:

Сообщение от devote (Сообщение 180695)
некоторые браузеры конвертируют цветовые значения в то состояние с которым им удобно, допусти при назначении цвета для элемента таким образом:
<body>
<script>
document.body.style.backgroundColor = '#f00';
// сконвертит его в rgb(255, 0, 0)
alert( document.body.style.backgroundColor ); // увидим rgb(255, 0, 0)
</script>
</body>
то есть я тестил в опере, в других браузерах может быть иначе.

Не понял, при чем здесь это. Ну сконвертирует он цвет в rgb и что?
И ведь первые 2нажатия на кнопку работают, а дальше нет

devote 10.06.2012 23:25

можно просто использовать функцию конвертер, которая будет превращать всякие rgb значения в HEX:
<body>
<script type="text/javascript">
function toHexColor( color ) {

    return color.replace( /rgba?\(([^\)]+)\)|#([a-f0-9]{6}|[a-f0-9]{3})/ig, function( m, rgb, hex ) {

        if ( rgb = /([0-9\.]+)(\%?)\s*,\s*([0-9\.]+)(\%?)\s*,\s*([0-9\.]+)(\%?)\s*(?:,\s*([0-9\.]+))?/g.exec( rgb || "" ) ) {

            hex = parseInt( rgb[2] ? rgb[1] * 2.55 : rgb[1] ).toString( 16 ).replace( /^(.)$/, '0$1' ) +
                parseInt( rgb[4] ? rgb[3] * 2.55 : rgb[3] ).toString( 16 ).replace( /^(.)$/, '0$1' ) +
                parseInt( rgb[6] ? rgb[5] * 2.55 : rgb[5] ).toString( 16 ).replace( /^(.)$/, '0$1' );

            m = rgb[ 7 ] == "" || rgb[ 7 ] === undefined ? 1 : parseFloat( rgb[ 7 ] );

        } else if ( hex && ( m = 1 ) ) {

            hex = hex.replace( /^(.)(.)(.)$/, "$1$1$2$2$3$3" );

        } else {

            return m;
        }

        return "#" + hex;
    });
}

document.body.style.backgroundColor = '#f00';
// сконвертит его в #ff0000
alert( toHexColor( document.body.style.backgroundColor ) ); // увидим #ff0000
</script>
</body>
простая ковертация цветов в шестизначный HEX

devote 10.06.2012 23:26

Цитата:

Сообщение от Hekumok
Не понял, при чем здесь это. Ну сконвертирует он цвет в rgb и что?
И ведь первые 2нажатия на кнопку работают, а дальше нет

при том что ты пытаешься сравнить значение "#f00" со значением "rgb( 255, 0, 0 )" это разные значения и они всегда будут не равны, тем самым условие твое никогда не сработает


Часовой пояс GMT +3, время: 02:10.