使用 Javascript 选择颜色值

Selecting Color Value With Javascript

本文关键字：颜色值 选择 Javascript 使用      更新时间：2023-09-26

在我的选项表单中，我有一些颜色输入，我想加载它们的预设值，但目前它不会选择和显示给定的值。

该网页：

    <h3 class="option">Search Bar Background Color:</h3>
    <input type="color" class="color searchBarBackground" id="barBackground" name="searchBarBackground">
    <h3 class="option">Search Bar Placeholder Text Color:</h3>
    <input type="color" class="color searchBarPlaceholder" id="placeColor" name="searchBarPlaceholder">
    <h3 class="option">Search Bar Text Color:</h3>
    <input type="color" class="color searchBarText" id="barColor" name="searchBarText">
    <h3 class="option">Go Button Background Color:</h3>
    <input type="color" class="color goButtonBackground" id="goBackground" name="goButtonBackground">

Javascript 加载函数：

window.onLoad = loadOptions();
function loadOptions() {
    var defaultBarBackground = '#000000';
    var defaultGoBackground = '#000000';
    var defaultBarColor = '#ffffff';
    var defaultPlaceColor = '#999999';
    chrome.storage.local.get('barBackgroundOption', function (x) { 
        $('#barBackground').attr("value", x.barBackgroundOption);
    });
    chrome.storage.local.get('barColorOption', function (x) {
        $('#barColor').attr("value", x.barColorOption);
    });
    chrome.storage.local.get('placeColorOption', function (x) { 
        $('#placeColor').attr("value", x.placeColorOption);
    });
    chrome.storage.local.get('goBackgroundOption', function (x) { 
        $('#goBackground').attr("value", x.barBackgroundOption);
    });

我很确定问题只是选择该值，因为当我检查页面上的元素时，它具有正确的值 - 它只是不显示它。

您是在页面加载之前调用代码。您不是将方法分配给 onload，而是将返回给它的内容分配给它。

window.onLoad = loadOptions();
                           ^^

需要

window.onLoad = loadOptions;

您使用attr()来设置值似乎也很奇怪。而且你真的不应该使用 .onload 来设置加载 onload 的东西，这是不好的做法。既然你使用的是jQuery，所以使用 

$(window).on("load", loadOptions);

如果没有jQuery，你会使用addEventListener()

相关文章：