Попытка передать цвет Hex в качестве параметров в JavaScript

Question

Здравствуйте, я сейчас испытываю трудности с работой на Сайте, я хотел бы иметь 10 предустановленных цветовых схем и менять их с помощью щелчка значка, вместо того, чтобы писать функцию 10X Я бы предпочел сделать это один раз, и каждый значок со ссылкой просто отправит параметры, что я пытаюсь, не работает, хотя бы любое указание на то, что я делаю неправильно, будет оценено

Вызов функции

<button type="button" onclick="themeOne(#D3649F,#000000,#666666)">Theme 1</button> 

И теперь для функции

function themeOne(p1,p2,p3) { 

    var links = document.getElementById('slidebar').getElementsByTagName('a'); 

    for (var i = 0; i < links.length; i++) { 
     links[i].style.color = p1; 
    } 


    var glyph = document.querySelectorAll(".blue"); 

    for (var i = 0; i < glyph.length; i++) { 
     glyph[i].style.color = p1; 
    } 

    document.body.style.backgroundColor = p3; 
    document.getElementById("navbar").style.backgroundColor = p2; 
    document.getElementById("navbar2").style.backgroundColor = p2; 
    document.getElementById("slidebar").style.backgroundColor = p2; 
    document.getElementById("page-content").style.color = "#FFFFFF"; 
} 

Моя забота о том, что я передаю переменной, поскольку я не уверен, что «#» считается int или мне нужно что-то сделать, как просто отправить числовые цифры и проследить что-то вроде:

document.body.style.backgroundColor = "#" + p3; 

Answer 1

Вы должны передать параметры в виде строк. это приведет к изменению следующих действий:

<button type="button" onclick="themeOne('#D3649F', '#000000','#666666')">Theme 1</button> 

Answer 2

Откройте консоль и введите 0xD3649F в нем. Вы увидите вывод 13853855, который ничего особенного не представляет. Он преобразуется в простое число, как если бы вы написали напрямую 13853855.

Вы можете преобразовать число в шестнадцатеричной строки, но это будет более удобно для вас просто окружить шестнадцатеричное значение передается themeOne в кавычки, другими словами следующее:

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button> 

Это строка, конечно, но точно так же, как значения ширины обычно содержат единицы и требуют, чтобы это значение было строкой (то есть '150px' вместо номера 150), вполне приемлемо назначить строку шестнадцатеричного номера для значений цвета.

Answer 3

Привет верит, что вы должны иметь цвета в виде строк .... как в вашей функции:

document.getElementById("page-content").style.color = "#FFFFFF" 

Итак:

<button type="button" onclick="themeOne('#D3649F','#000000','#666666')">Theme 1</button> 

может быть ответ?

обновление: Да, я проверил его, и эта модификация работает.

Answer 4

Вы должны использовать CSS вместо того, чтобы делать это с помощью JavaScript ...

Вы должны использовать Javascript только для переключения с одной темы на другую ... вот пример:

function themeCtrl($) { 
 
    var select = $('#themeCtrl'); 
 
    var container = $('#container'); 
 
    
 
    var theme = 'theme-' + select.val(); 
 
    
 
    select.change(function() { 
 
    var _theme = 'theme-' + select.val(); 
 
    
 
    container.removeClass(theme).addClass(_theme); 
 
    }); 
 
} 
 

 
jQuery(document).ready(themeCtrl);

.theme-default .text-success { color: green; } 
 
.theme-default .text-error { color: red; } 
 
.theme-default .text-danger { color: orange; } 
 
.theme-default .text-info { color: cyan; } 
 

 
.theme-inverted .text-success { color: red; } 
 
.theme-inverted .text-error { color: green; } 
 
.theme-inverted .text-danger { color: cyan; } 
 
.theme-inverted .text-info { color: orange; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<select id="themeCtrl"> 
 
    <option selected value="default">Default</option> 
 
    <option value="inverted">Inverted</option> 
 
</select> 
 
<hr /> 
 

 
<div class="theme-default" id="container"> 
 
    <div class="text-success">TEXT SUCCESS</div> 
 
    <div class="text-error">TEXT ERROR</div> 
 
    <div class="text-danger">TEXT DANGER</div> 
 
    <div class="text-info">TEXT INFO</div> 
 
</div>