Override/удалить CSS свойство с JavaScript

Я пишу небольшой плагин, который позволяет пользователю легко добавлять переходы в JavaScript без JQuery:Override/удалить CSS свойство с JavaScript

HTML:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Snippety</title> 
<script src="snip.js" type="text/javascript"></script> 
<link rel="stylesheet" href="snip.css" type="text/css" /> 
</head> 

<body> 

<script> 
transition(
transSelector = '.snip', 
transTime = '5s', 
transDelay = 0000, 
transFunc = 'transTo("background-color:red!important;")' 
); 
</script> 

<div class="snip" id="snip">buhhug</div> 

</body> 
</html>

Js Plugin:

function transition(transSelector,transTime,transDelay,transFunc) { 
document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}'); 
setTimeout(transFunc, transDelay) 
} 

function transTo(rule) { 
    document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}'); 
}

CSS:

.snip { 
background-color: green; 
}

Проблема заключается в том, что, когда цвет меняется на красный в JavaScript, мне нужно добавить !important изменить .snip к background-color:red;, но это работает только один раз. Есть ли способ удалить background-color:green; в таблицу стилей css или переопределить без необходимости вставить в нее !important? (Я хочу изменить цвет более одного раза).

Я пробовал .addRule вместо .insertRule, но я думаю, что я лаю неправильное дерево.

источник

2015-05-09 ScriptKitty

Я удивлен, что это важно - я думал, что javascript ставит стили в линию, и что встроенные стили переписывают любые другие стили CSS, важно или нет. – wunth

Он работает только тогда, когда я ставил! Важно, он просто остается зеленым, иначе – ScriptKitty

Это делает разница, если вы делаете transSelector = '# snip' – wunth

имеет второй параметр, указывающий, где вы хотите вставить правило. Если этот параметр равен 0, он вставляет его в верхнюю часть таблицы стилей. Который поставил бы его перед всеми другими правилами, что означало бы, что исходное правило действительно наступает после первого. Попробуйте document.styleSheets[0].insertRule(''+transSelector+' {'+rule+'}', 1);.

См. https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule.

EDIT, чтобы ответить на второй вопрос:

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

Во-первых, вы вызываете функцию transition и поставляете имена переменных, а также значения. На некоторых языках вы можете использовать «именованные параметры», но в JS он не делает того, что вы хотите. Фактически вы создаете глобальную переменную transSelector, а затем установите ее на '.snip'. То же самое для остальных переменных. Эти значения передаются вместе с функцией transition. Затем вы снова вызываете transition, но теперь вы переписываете одни и те же глобальные переменные с новыми значениями. К тому времени, когда вызывается transTo, transSelector не означает, что он имел в виду, и он все испортился. Избавьтесь от глобальных переменных и передайте только значения.

Это вызывает другую проблему, которая заключается в том, что transTo не знает, что такое transSelector, так как оно не является глобальным. Кроме того, есть вероятность злоупотребления, потому что вы передаете строку в setTimeout, которая является только another form of eval(). Вместо этого вы можете просто превратить это в анонимную функцию, и те же параметры будут доступны для него.

Таким образом, новый плагин будет выглядеть следующим образом:

function transition(transSelector,transTime,transDelay,transRule) { 
    document.styleSheets[0].insertRule(''+transSelector+' {transition:'+transTime+';-webkit-transition:'+transTime+';}', 1); 
    setTimeout(function() { 
    document.styleSheets[0].insertRule(''+transSelector+' {'+transRule+'}', 1); 
    }, transDelay) 
}

И вы могли бы назвать это так:

transition('.snip', '5s', 0000, 'background-color:red !important;');

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

источник

2015-05-09 04:22:32 mherzig

Как я могу заставить его работать для нескольких элементов, если я попытаюсь дублировать функцию перехода и установить его на другой элемент, он загружает только первый переход. – ScriptKitty

Я думаю, что в этом скрипте может быть другая проблема; вы не передаете 'transSelector' во вторую функцию, поэтому, вероятно, рассматриваете ее как глобальную переменную. Вероятно, вам нужно передать 'transSelector' в вашу функцию' transTo'. – mherzig

Отличный @mherzig, но есть ли какой-либо способ 'transSelector' не использовать в функции' transTo' (я хочу, чтобы «transSelector» использовался один раз), предпочтительно только от функции «переход». – ScriptKitty

Override/удалить CSS свойство с JavaScript

ответ

Смежные вопросы