Задать вопрос
Creamov

Дмитрий Маринин

Senior Fullstack Software Engineer
Ответы пользователя по тегу HTML

  • Как добавить/удалить link в head? И возможно ли это вообще?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Вот вариант подключения/отключения файла стилей без jQuery. Работать будет гораздо быстрее чем вариант с jQuery, поскольку это чистый JavaScript.

    // Подключает
function addStyleSheets (href) {
    var $head = document.head,
        $link = document.createElement('link');

    $link.rel = 'stylesheet';
    $link.href = href;

    $head.appendChild($link);
}

// Отключает по ссылке
function disableStyleSheets (href) {
    var styles = document.styleSheets;
    for (i in styles) {
        if (styles[i].href == href) {
            styles[i].disabled = true;
        }
    }
}

// Примеры
addStyleSheets('путь/до/файла/со/стилями.css');     // Подключаем
disableStyleSheets('путь/до/файла/со/стилями.css'); // Отключаем

    В вашем случае, для изменения цветовой схемы страницы, лучше использовать особые классы. При клике на какую-нибудь кнопку добавлять соответствующий класс элементу body. Ниже привожу пример добавления класса к body используя чистый JavaScript.

    // Вариант для IE10+
var $body = document.querySelector('body');
$body.classList.toggle('red-theme'); // удалит/добавит класс .red-theme для <body>
    Ответ написан
    11 комментариев
    11 комментариев

  • Как сделать такие кнопки?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Нет, SVG тут не нужен. Там используется обычный элемент с белым фоном и нулевой высотой (height), который находится внутри ссылки с overflow: hidden. Он повернут на 45 градусов и имеет opacity: 0. При наведении, opacity становится равным 1, и его высота (height) увеличивается на значение, равное ширине (width) ссылки, внутри которой он лежит (засчет чего и создается эффект заполнения).

    4db7731524fc4efbad6bc81c267f5662.png
    Ответ написан
    Комментировать
    Комментировать

  • Можно ли вставить svg используя :after?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Конечно. Используйте для этого свойство content.

    .some-element::after {
    content: url('data:image/svg+xml; base64, <тут_закодированный_svg>');
    /* или */
    content: url("data:image/svg+xml; utf8, <тут_код_svg>");
}

    P.S. в CSS3 для псевдо-элементов необходимо использовать два двоеточия ::before, ::after, вместо одного.
    Ответ написан
    11 комментариев
    11 комментариев

  • Как просканировать значения в таблице?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Например так:

    var values = [];
$('table td:nth-child(2)').each(function(){
    values.push($(this).text());
});

    codepen.io/anon/pen/WvWKRv

    Или использовать вариант с $.map(), как предложил Алексей Зуев.

    В комментариях вы попросили привести пример реализации через for(). Тем не менее, я не рекомендую использовать этот подход:

    var $cells = $('table td:nth-child(2)'), 
    values = [],
    i;

for (i = 0; i <= $cells.length; i++) {
    values.push($cells.eq(i).text());
}

    codepen.io/anon/pen/jPRpwq
    Ответ написан
    4 комментария
    4 комментария

  • Почему я не могу на верстке кликать на ссылки?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Если вы установите #content свойство z-index равное -1, то это решит вашу проблему, поскольку #content переместится на задний план.

    Верстка — без комментариев. Поищите и почитайте материалы про позиционирование элементов.
    Ответ написан
    Комментировать
    Комментировать

  • Как сделать отступ автоматически?

    Creamov
    @Creamov
    Senior Fullstack Software Engineer
    Элементы с абсолютным позиционированием не зависят от общего потока, поэтому добавлять автоматический отступ относительно другого элемента, средствами CSS, не получится.

    Уберите position: absolute; у параграфов (даты, заголовка, описания). Оберните их в <div class="wrap">...</div> и позиционируйте этот «div» так, как вам нужно.


    Дополнительно (на будущее):

    Строчные элементы не должны содержать внутри себя блочные элементы. Если вы все же хотите это сделать, то делайте из строчного элемента — блочный.

    <a href="#"> <!-- строчный элемент -->
    <p>Some paragraph</p> <!-- блочный элемент -->
</a>

    Элементу «a», в данном случае, необходимо задать display: block; или display: inline-block; в CSS.

    И еще, пожалуйста, научитесь форматировать код. Во первых, это позволит вам самим лучше воспринимать его, а во вторых, другие разработчики более охотно смогут вам помочь. В такой каше, как у вас, мало кому захочется разбираться (не важно, демо/тест или реальный проект).
    Ответ написан
    1 комментарий
    1 комментарий