window.getComputedStyle не работает для сокращенных свойств в других браузерах, кроме Chrome

window.getComputedStyle выдает значение стиля в Chrome, но в Firefox и Microsoft Edge он выдает пустую строку, а в Internet Explorer говорит, что не поддерживает этот метод. Вот мой код

При каждом нажатии на изображение Upvote запускается upDownVote() функция, передавая два аргумента. Это HTML.

 <div id="upvote" title="Click to UpVote" onClick="upDownVote('increment',<?php echo $id; ?>);"></div>
 <div id="downvote" title="Click to DownVote" onClick="upDownVote('decrement',<?php echo $id; ?>);"></div>

Я передал три переменные в мой php-скрипт через ajax; Идентификатор, тип, применимо. Тип может хранить одно значение, увеличение или уменьшение.

Я хотел, даже кнопка upvote нажата. Значение голосования увеличивается на 1, а фон кнопки меняется. То же самое для кнопки downvote, но здесь есть уменьшение значения голоса. Я справляюсь с этим type переменная.

При повторном нажатии (или двойном щелчке пользователем) по upvote значение голоса должно быть уменьшено, а не увеличено. Я обработал это с помощью вложенного условия if внутри условия if (когда тип является инкрементом). В этом состоянии я проверил, если applicable больше единицы. Если это так, я изменил type уменьшать и применять к 0, а также фон к исходному изображению.

Но что делать, если пользователь нажал кнопку upvote после нажатия кнопки downvote. В таком состоянии applicable значение больше 1. А затем необходимо изменить type уменьшать. Этого не должно быть. для этого в моем, который вложил, если условие, которое я добавляю, также проверяет фон кнопки downvote. Он должен быть таким же, как и раньше при загрузке страницы.

когда применимое значение больше 1 (когда пользователь щелкнул голосование вверх, прежде чем щелкнуть голосование вниз). В моем PHP-скрипте я увеличиваю значение голоса на два.

Та же логика для кнопки понижения.

а вот и JavaScript.

var applicable = 0; // determine applicable to vote or not.
var upvote = document.getElementById("upvote"); 
var downvote = document.getElementById("downvote");

var upvoteBlack = window.getComputedStyle(upvote).getPropertyValue("background");
var downvoteBlack = window.getComputedStyle(downvote).getPropertyValue("background");

function upDownVote(x, id) {
    debugger;
    var type = x; // determine the type(increment or decrement).
    if (type === "increment") { 
        upvote.style.background = "url(img/image-sprite-1.jpg) 0px -40px";

        applicable++; // increment in the applicable.
        if (applicable > 1 && window.getComputedStyle(downvote).getPropertyValue("background") === downvoteBlack) { 
            type = "decrement"; 
            applicable = 0;
            upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
        }
        downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
    } else {
        downvote.style.background = "url(img/image-sprite-1.jpg) -40px -40px";
        applicable++;
        if(applicable > 1 && window.getComputedStyle(upvote).getPropertyValue("background") === upvoteBlack) {
            type = "increment";
            applicable = 0;
            downvote.style.background = "url(img/image-sprite-1.jpg) -40px 0px";
        }
        upvote.style.background = "url(img/image-sprite-1.jpg) 0px 0px";
    }

    // Ajax started here.
}

CSS из upvote а также downvote,

div#upvote {
    width: 40px;
    height: 40px;
    background: url(../img/image-sprite-1.jpg);
    background-position: 0px 0px;
    margin: 0px auto;
    margin-top: 10px;
    cursor: pointer;
}
div#downvote {
    width: 40px;
    height: 40px;
    background: url(../img/image-sprite-1.jpg) -40px 0px;
    background-position: -40px 0px;
    margin: 0px auto;
    cursor: pointer;
}

Все отлично работает, но сейчас я застрял. Как получить фоновое значение кнопок как window.getComputedStyle не работает нормально все браузеры. Я хочу знать, есть ли другое свойство, с помощью которого я могу иметь свойство background.

Кроме того, я хочу знать, как я могу сделать то же самое с другой логикой. Если я не могу найти решение для window.getComputedStyle,

Источник

1 ответ

Решение

Сокращенная проблема собственности

background является сокращенным свойством, комбинацией фоновых свойств. Когда вы устанавливаете фон pink, это на самом деле устанавливает ряд свойств фона, только одно из которых backgroundColor, Например, это, вероятно, на самом деле делает эквивалент rgb(255, 165, 0) none repeat scroll 0% 0% / auto padding-box border-box,

getComputedStyle не будет возвращать значение сокращенных свойств, кроме как в Chrome, как вы обнаружили.

Чтобы получить вычисляемый стиль, найдите значение примитивных свойств, таких как backgroundColor, а не что из сокращенных свойств, таких как background,

Другой подход?

Тем не менее, это не совсем то, как вы хотите делать вещи. Вместо того, чтобы устанавливать стили непосредственно для ваших элементов, вы обнаружите, что ваш код будет намного чище, если вы добавите и удалите классы из своих элементов, а затем определите правила для классов. Как вы обнаружили, установка стилей непосредственно на элементах может потребовать от вас возврата и запроса стиля, тогда как с помощью классов вы можете легко запросить существующий класс с помощью elt.classList.has()или переключаться с .toggle()или добавить, или удалить.

Еще getComputedStyle

getComputedStyle это довольно специализированный API, который необходим только в особых ситуациях.

Подробнее о проблеме getComputedStyle и стенографические свойства, см. этот вопрос. Об ошибке было сообщено против FF, и вы можете найти ее здесь.

Смотрите эту страницу MDN. Это говорит о том, что CSSStyleDeclaration (это то, что возвращается getComputedStyle) имеет getPropertyCSSValue метод, который

возвращает... null для свойств Shorthand.

Источник
Другие вопросы по тегам