Восстановить стиль по умолчанию при изменении с помощью JavaScript

8

В JS-функции я установил цвет фона текстового поля следующим образом:

document.getElementsByName(formId)[0].title.style.backgroundColor = "#7FB75E";

В другой функции я хочу reset цвет фона для значения по умолчанию, определенного в моей таблице стилей. Как я могу это сделать?

Теги:

3 ответа

12
Лучший ответ

Просто установите значение для объекта "style" в пустую строку.

document.getElementsByName(formId)[0].title.style.backgroundColor = "";

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

Поделиться
  • 0
    Этот ответ лучше моего.
  • 0
    @jessegavin, ваш ответ тоже верен - если элемент стилизован с помощью встроенного CSS, его нужно будет сохранить.
Показать ещё 3 комментария
4

Перед тем, как задать цвет фона на новое значение, сохраните его как свойство для этого элемента для последующего извлечения.

var el = document.getElementsByName(formId)[0].title;
el._originalBackgroundColor = el.style.backgroundColor;


// Set the new color
el.style.backgroundColor = "#7FB75E";

// Set it back to original
el.style.backgroundColor = el._originalBackgroundColor;
Поделиться
  • 0
    Спасибо, теперь я взял ответ Пойнти за мой код, но это решение, похоже, тоже работает.
  • 0
    Вы должны убедиться, что нажали галочку слева от его ответа. Это даст будущим читателям знать, что это ответ, который вы выбрали.
0

Я знаю, что на это был дан ответ, но OP спросил, как восстановить стиль, который был изменен с помощью Javascript. В других словах, как восстановить стиль, который мой элемент имел, прежде чем он был изменен чем-то другим. Извините, но я не думаю, что ответы выше делают это. Ответ удалить стиль, а не восстановить это!

Я использую CSS настолько, насколько могу, и мне удалось создать "слой" нового стиля CSS для элемента и удалить слой по мере необходимости, показывая стиль оригинала/по умолчанию.

Предполагается, что у меня есть gridview со следующим css...

table.gvCSS {
  margin-top: 50px;
  font: 12px Verdana;
}

table.gvCSS > tbody > tr {
  background-color: white;
}

table.gvCSS > tbody > tr:nth-of-type(odd) {
  background-color: #EEE;
}

table.gvCSS > tbody > tr:first-of-type {
  background-color: #5D7B9D;
  color: white;
}

table.gvCSS > tbody > tr.selected-row {
  background-color: yellow;
}

Мой GridView...

            <asp:GridView ID="gvTETstudents" runat="server" 
                CssClass="gvCSS">
               <Columns>
....
...
                    </Columns>
                    <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" />
                    <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
                    <HeaderStyle BackColor="Orange" Font-Bold="True" ForeColor="Black" VerticalAlign="Bottom" />
                </asp:GridView>

Эти маленькие функции управляют добавлением и удалением классов по мере необходимости...

function hasClass(ele,cls) {
  return !!ele.className.match(new RegExp('(\\s|^)'+cls+'(\\s|$)'));
}

function addClass(ele,cls) {
  if (!hasClass(ele,cls)) ele.className += " "+cls;
}

function removeClass(ele,cls) {
  if (hasClass(ele,cls)) {
    var reg = new RegExp('(\\s|^)'+cls+'(\\s|$)');
    ele.className=ele.className.replace(reg,' ');
  }
}

function highlightRow(chk) {
  var row = chk.parentNode.parentNode.parentNode;
  if (chk.checked)
    addClass(row, 'selected-row');
  else
    removeClass(row, 'selected-row');
}

Поэтому, когда мне когда-либо нужно переключать фон строки, например...

                        <asp:CheckBox ID="cbSKIP" runat="server" 
                            Font-Size="10pt" Font-Italic="true" ForeColor="DarkGreen" BackColor="Yellow"
                            onClick="highlightRow(this)"
                            ToolTip="Choosing this will save the comment into the student contact-log, but not actually email it!"
                            Text="SAVE TO CONTACT-LOG ONLY (no email)?" />

Независимо от того, какие стили у вас были в исходной строке, вышесказанное применит новый стиль и удалит его, показывая, что вы изначально (т.е. переключились строки сетки в альтернативном порядке).

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню