Как я загружаю правила CSS динамично в WebKit (Safari/Chrome)?

Даже если явно не запрашивается, я предлагаю другой способ управления кистями, который, я думаю, может упростить переключатель ForeColor / BackColor и позволяет лучше настроить представление ListBox.

Создать объект класса, который содержит все выбранные / предварительно выбранные кисти и предоставляет общедоступные свойства для изменения этих значений, если / когда это необходимо.
Кроме того, этот класс предоставляет метод для возврата правильной комбинации кистей, выбирая правильные правильные на основе пары условий:

  • Текстовое содержимое текущего элемента
  • ]
  • Его выбор Статус (Selected/Focused или NotAccelerator/NotFocusedRect)

Класс довольно прост.
Он имеет перегруженный конструктор, который позволяет указывать значения по умолчанию или определенные атрибуты Color в соответствии со стандартным внешним видом элемента управления ListBox.

При использовании конструктора по умолчанию (пустого) для комбинации цветов ForeGround / BackGround по умолчанию установлено значение Color.Black и Color.White:

public ReportsBrushes() : this(Color.White, Color.Black) { }

, в противном случае он принимает 2 параметра, установить конкретные значения:

public ReportsBrushes(Color ItemBackColor, Color ItemForeColor)
{
    this.StandardForeground = new SolidBrush(ItemForeColor);
    this.StandardBackground = new SolidBrush(ItemBackColor);
}

Это упрощает метод ListBox.DrawItem:

private ReportsBrushes reportsBrushes = new ReportsBrushes();

private void listBox1_DrawItem(object sender, DrawItemEventArgs e)
{
    ListBox ctl = sender as ListBox;
    e.Graphics.TextRenderingHint = TextRenderingHint.ClearTypeGridFit;
    e.DrawFocusRectangle();

    var itemColors = reportsBrushes.GetItemBrushes(ctl.Items[e.Index].ToString(), e.State.HasFlag(DrawItemState.Selected));

    using (StringFormat format = new StringFormat())
    {
        format.LineAlignment = StringAlignment.Center;
        e.Graphics.DrawString(ctl.Items[e.Index].ToString(), ctl.Font, itemColors.ForeColor, e.Bounds, format);
    }
}

private void listBox1_MeasureItem(object sender, MeasureItemEventArgs e)
{
    e.ItemHeight = listBox1.Font.Height + 4;
}

Класс ReportsBrushes :

internal class ReportsBrushes
{
    public ReportsBrushes() : this(Color.White, Color.Black) { }
    public ReportsBrushes(Color ItemBackColor, Color ItemForeColor)
    {
        this.StandardForeground = new SolidBrush(ItemForeColor);
        this.StandardBackground = new SolidBrush(ItemBackColor);
    }
    public SolidBrush StandardForeground { get; set; }
    public SolidBrush StandardBackground { get; set; }

    public SolidBrush SelectedForeground { get ; set ; } = 
        new SolidBrush(Color.FromKnownColor(KnownColor.HighlightText));
    public SolidBrush SelectedBackground { get; set; } = 
        new SolidBrush(Color.FromKnownColor(KnownColor.Highlight));
    public SolidBrush SuccessBackground { get; set; } = 
        new SolidBrush(Color.LimeGreen);
    public SolidBrush ErrorBackground { get; set; } = 
        new SolidBrush(Color.OrangeRed);

    public (SolidBrush ForeColor, SolidBrush BackColor) GetItemBrushes(string ItemText, bool ItemSelected)
    {
        if (ItemSelected)
            return (this.SelectedForeground, this.SelectedBackground);
        else
        {
            if (ItemText.Contains("Success"))
                return (this.StandardForeground, this.SuccessBackground);
            if (ItemText.Contains("Error"))
                return (this.StandardForeground, this.ErrorBackground);
            return (this.StandardForeground, this.StandardBackground);
        }
    }
}
7
задан Erick Robertson 25 April 2012 в 18:54
поделиться

7 ответов

Я думаю, что это - лучшая практика для добавления тега "ссылки" к заголовку документа. Если это не возможно, попытайтесь добавить тег "стиля" голове. Теги style не должны быть в теле (Даже не проверяет).

Добавьте тег link:

var link = document.createElement('link');

link.setAttribute('rel', 'stylesheet');

link.type = 'text/css';

link.href = 'http://example.com/stylesheet.css';

document.head.appendChild(link);

Добавьте тег style:

var style = document.createElement('style');

style.innerHTML = 'body { background-color: #F00; }';

document.head.appendChild(style);
8
ответ дан 6 December 2019 в 11:53
поделиться

Спасибо Vatos, Вы дали мне хороший вывод, в основном я сделал то, что Вы предложили, но использовали jQuery, чтобы установить HTML и добавить новый стиль голове с тех пор, сафари/хром остановится при выполнении innerHTML, и document.head был не определен. Мой код закончил сходство с этим

var cssDefinitions = '..my style chunk goes here';
var style = document.createElement('style');'
$(style).html(cssDefinitions);
$('head').append(style);
1
ответ дан 6 December 2019 в 11:53
поделиться

Вот концерт. То, что сказал Патрик, меня не устроило. Вот как я это сделал.

    var ref = document.createElement('style');
ref.setAttribute("rel", "stylesheet");
ref.setAttribute("type", "text/css");
document.getElementsByTagName("head")[0].appendChild(ref);
if(!!(window.attachEvent && !window.opera)) ref.styleSheet.cssText = asd;//this one's for ie
else ref.appendChild(document.createTextNode(asd));

InnerHTML устарел и не должен использоваться для подобных целей. Кроме того, он тоже медленнее.

1
ответ дан 6 December 2019 в 11:53
поделиться

Самый простой способ (то есть с использованием jQuery) следующий:

var cssLink = $('<link />');
cssLink.attr("rel","stylesheet")
cssLink.attr("type", "text/css");
cssLink.attr("href","url/to.css");

Если вы сделаете это таким образом, он будет работать в Safari. Если вы сделаете это обычным способом jQuery (все в одной текстовой строке), это не удастся (CSS не загрузится).

Затем вы просто добавите его в заголовок с помощью $ ('head'). Append (cssLink) ;

2
ответ дан 6 December 2019 в 11:53
поделиться

Прямой путь jQuery (работает в основных браузерах, включая Chrome): http://topsecretproject.finitestatemachine.com/2009/09/how-to-load-javascript-and-css-dynamically-with-jquery/

С сайта:

$("head").append("<link />");
var CSS = $("head").children(":last");
CSS.attr({
"rel": "stylesheet",
"type": "text/css",
"href": "url/to.css"
});

Примечание: пример также включает в себя инъекцию JS, которую можно проигнорировать, если вы просто хотите ввести ссылку CSS.

.
4
ответ дан 6 December 2019 в 11:53
поделиться

мех. У меня недостаточно очков, чтобы проголосовать за результат Андрея Цимпоки, но это решение здесь лучшее.

style.innerHTML = "..."; не работает в движках webkit или т.е.

Чтобы правильно ввести текст css, вы должны:

style.styleSheet.cssText = "..."; для т.е.

и

style.appendChild (document.createTextNode ("...")); для webkit.

Firefox также будет работать со вторым вариантом или со style.innerHTML = "...";

1
ответ дан 6 December 2019 в 11:53
поделиться

Помимо версий на основе тегов стилей, описанных выше, вы также можете добавлять стили напрямую с помощью javascript:

var style = document.getElementById('some-style-tag');
var sheet = style.sheet;
sheet.insertRule('.mydiv { background-color: ' + color + '; }', sheet.cssRules.length);

Это дает преимущество в том, что вы можете использовать переменные, не прибегая к cssText / innerHTML.

Имейте в виду, что в браузерах на основе webkit это может быть медленным, если вы вставляете много правил. Открыта ошибка для исправления этой проблемы с производительностью в webkit ( https://bugs.webkit.org/show_bug.cgi?id=36303 ). А пока вы можете использовать теги стиля для массовой вставки.

Это стандартный способ вставки правил стиля W3C, но он не поддерживается ни одной версией IE: http://www.quirksmode.org/dom/w3c_css.html

0
ответ дан 6 December 2019 в 11:53
поделиться
Другие вопросы по тегам:

Похожие вопросы: