JavaScript, если что-то имеет атрибут CSS значения

Question

JavaScript, если что-то имеет атрибут CSS значения

0

Я хотел бы выполнить анимацию при загрузке страницы, но только тогда, когда атрибут css имеет значение чего-то. Анимация отлично работает без инструкции if. Вот мой код:

$(document).ready(function() {

    if($("h1").css('font-size') == '36px'){

        $("h1").animate({
          "font-size" : "20px"
        }, 750);

    }

});

user2812034 24 сен. 2013, в 19:06

Источник

Теги:

javascript

jquery

css

attributes

4 ответа

5

Я думаю, вы пытаетесь анимировать элементы h1 с размером шрифта: 36 пикселей. Затем вам нужно отфильтровать эти элементы перед анимацией, как показано ниже:

$(document).ready(function () {
    $("h1").filter(function () {
        return ($(this).css('font-size') == "36px");
    }).animate({
        "font-size": "20px"
    }, 750);
});

Mr_Green 24 сен. 2013, в 15:44

1

Примечание: element.style[property] будет включать только встроенные стили, тогда как $(element).css(property) будет извлекать вычисленные стили, в том числе унаследованные от таблицы стилей.
Jonathan Lonowski 24 сен. 2013, в 17:14
0

@JonathanLonowski обновлен .. (оставьте свой комментарий для будущих ссылок, пожалуйста)
Mr_Green 24 сен. 2013, в 17:15
0

Я не чувствую, что это отвечает на вопрос пользователя. Это альтернативное решение, но оно не объясняет, почему условие ложно. Если это работает, то не должно ли работать и решение ОП?
Gray 24 сен. 2013, в 17:20
1

@ Серый Не совсем. Это будет проверять font-size каждого отдельного <h1> то время как фрагмент в вопросе проверяет только 1-е <h1> - .css(property) может вернуть значение только для 1 элемента. Если на самом деле ни один из них не является 36px , то нет, это тоже не 36px ни одного из них. Но это информация, которую ОП не предоставил нам.
Jonathan Lonowski 24 сен. 2013, в 17:22
0

Хорошо, я понимаю это. Вы попали в то, что я получил. Проблема (если вы видите его комментарий к OP) заключается в том, что размер шрифта фактически не 36px. Если бы это было так, то его решение, вероятно, сработало бы ... см. Это: jsfiddle.net/V7XtC/2
Gray 24 сен. 2013, в 17:25
0

@ Серый Я согласен с Джонатаном. Я на 99% уверен, что $('h1') не обращается к элементу h1 ОП. но давай просто подождем OP.
Mr_Green 24 сен. 2013, в 17:29
0

@ Серый Конечно. Но есть также вероятность того, что у первого <h1> стиль отличается от остальных. jsfiddle.net/coiscir/ekgWc
Jonathan Lonowski 24 сен. 2013, в 17:32
0

@Mr_Green Я опубликовал ответ, который, я думаю, был использован для решения вопроса ОП. Я все еще думаю, что ваш ответ полезен - и более надежный способ сделать то, что ему нужно, но я все еще придерживаюсь того, что я сказал об этом, не являясь фактическим ответом на вопрос ... Хотя он, вероятно, должен все же реализовать это!
Gray 24 сен. 2013, в 17:41

Показать ещё 6 комментариев

1

if( $('h1').eq(0).css('<property>') ) {
 ...
}

Jeffpowrs 24 сен. 2013, в 15:44

0

Разве это не эквивалентно тому, что он написал? .css() возвращает значение свойства из первого элемента в коллекции. Ему, вероятно, нужно значение, отличное от 0 .
Barmar 24 сен. 2013, в 17:11

1

удалите "px" из кода при приравнивании размера шрифта:

if($("h1").css('font-size') == '36'){

        $("h1").animate({
          "font-size" : "20px"
        }, 750);

Nishad K Ahamed 24 сен. 2013, в 15:30

0

Это на самом деле не нужно. jsfiddle.net/V7XtC
Gray 24 сен. 2013, в 17:21

Ещё вопросы

Примечание: element.style[property] будет включать только встроенные стили, тогда как $(element).css(property) будет извлекать вычисленные стили, в том числе унаследованные от таблицы стилей.
@JonathanLonowski обновлен .. (оставьте свой комментарий для будущих ссылок, пожалуйста)
Я не чувствую, что это отвечает на вопрос пользователя. Это альтернативное решение, но оно не объясняет, почему условие ложно. Если это работает, то не должно ли работать и решение ОП?
@ Серый Не совсем. Это будет проверять font-size каждого отдельного <h1> то время как фрагмент в вопросе проверяет только 1-е <h1> - .css(property) может вернуть значение только для 1 элемента. Если на самом деле ни один из них не является 36px , то нет, это тоже не 36px ни одного из них. Но это информация, которую ОП не предоставил нам.
Хорошо, я понимаю это. Вы попали в то, что я получил. Проблема (если вы видите его комментарий к OP) заключается в том, что размер шрифта фактически не 36px. Если бы это было так, то его решение, вероятно, сработало бы ... см. Это: jsfiddle.net/V7XtC/2
@ Серый Я согласен с Джонатаном. Я на 99% уверен, что $('h1') не обращается к элементу h1 ОП. но давай просто подождем OP.
@ Серый Конечно. Но есть также вероятность того, что у первого <h1> стиль отличается от остальных. jsfiddle.net/coiscir/ekgWc
@Mr_Green Я опубликовал ответ, который, я думаю, был использован для решения вопроса ОП. Я все еще думаю, что ваш ответ полезен - и более надежный способ сделать то, что ему нужно, но я все еще придерживаюсь того, что я сказал об этом, не являясь фактическим ответом на вопрос ... Хотя он, вероятно, должен все же реализовать это!
Разве это не эквивалентно тому, что он написал? .css() возвращает значение свойства из первого элемента в коллекции. Ему, вероятно, нужно значение, отличное от 0 .
Это на самом деле не нужно. jsfiddle.net/V7XtC

Gray · Accepted Answer · 2013-09-24T15-02-00.000Z

Из комментариев OP, казалось бы, что блуждающее правило в таблице стилей привело к тому, что размер шрифта был установлен в нечто иное, чем они ожидали.

Способ определения этого может быть легко выполнен с помощью вашего инспектора DOM вашего браузера. Как правило, вы можете щелкнуть элемент правой кнопкой мыши, нажать "Проверить" (или что-то в этом роде) и посмотреть, где это значение задано.

Вот несколько более конкретных способов использования:

Chrome - https://developers.google.com/chrome-developer-tools/docs/elements

Firefox - https://developer.mozilla.org/en-US/docs/DOM_Inspector/Introduction_to_DOM_Inspector

Internet Explorer - http://msdn.microsoft.com/library/gg589507(VS.85).aspx

+1 странно, возможно, ОП использует em . Я не уверен, хотя.