我有以下标记：
我正在使用Piklor，一个较冷的选择器https://github.com/jillix/piklor.js/
初始化： header = pk.getElm（“。selected-icon p”）
并在此处指定颜色属性：
header.style.color = col;
但是，上述方法无效。我是否正确定位了p标签？ p标签的类在我的脚本中实际更改，所以我不能真正使用类名，只能通过父元素引用它。
如果我定位“.selected-icon”（没有p标签）和backgroundColor，例如header.style.backgroundColor = col;它似乎有效，但不是p标签的颜色。
(function (root) {
/**
* Piklor
* Creates a new `Piklor` instance.
*
* @name Piklor
* @function
* @param {String|Element} sel The element where the color picker will live.
* @param {Array} colors An array of strings representing colors.
* @param {Object} options An object containing the following fields:
*
* - `open` (String|Element): The HTML element or query selector which will open the picker.
* - `openEvent` (String): The open event (default: `"click"`).
* - `style` (Object): Some style options:
* - `display` (String): The display value when the picker is opened (default: `"block"`).
* - `template` (String): The color item template. The `{color}` snippet will be replaced
* with the color value (default: `"<div data-col=\"{color}\" style=\"background-color: {color}\"></div>"`).
* - `autoclose` (Boolean): If `false`, the color picker will not be hided by default (default: `true`).
* - `closeOnBlur` (Boolean): If `true`, the color picker will be closed when clicked outside of it (default: `false`).
*
* @return {Piklor} The `Piklor` instance.
*/
function Piklor(sel, colors, options) {
var self = this;
options = options || {};
options.open = self.getElm(options.open);
options.openEvent = options.openEvent || "click";
options.style = Object(options.style);
options.style.display = options.style.display || "block";
options.closeOnBlur = options.closeOnBlur || false;
options.template = options.template || "<div data-col=\"{color}\" style=\"background-color: {color}\"></div>";
self.elm = self.getElm(sel);
self.cbs = [];
self.isOpen = true;
self.colors = colors;
self.options = options;
self.render();
// Handle the open element and event.
if (options.open) {
options.open.addEventListener(options.openEvent, function (ev) {
self.isOpen ? self.close() : self.open();
});
}
// Click on colors
self.elm.addEventListener("click", function (ev) {
var col = ev.target.getAttribute("data-col");
if (!col) { return; }
self.set(col);
self.close();
});
if (options.closeOnBlur) {
window.addEventListener("click", function (ev) {
// check if we didn't click 'open' and 'color pallete' elements
if (ev.target != options.open && ev.target != self.elm && self.isOpen) {
self.close();
}
});
}
if (options.autoclose !== false) {
self.close();
}
}
/**
* getElm
* Finds the HTML element.
*
* @name getElm
* @function
* @param {String|Element} el The HTML element or query selector.
* @return {HTMLElement} The selected HTML element.
*/
Piklor.prototype.getElm = function (el) {
if (typeof el === "string") {
return document.querySelector(el);
}
return el;
};
/**
* render
* Renders the colors.
*
* @name render
* @function
*/
Piklor.prototype.render = function () {
var self = this
, html = ""
;
self.colors.forEach(function (c) {
html += self.options.template.replace(/\{color\}/g, c);
});
self.elm.innerHTML = html;
};
/**
* close
* Closes the color picker.
*
* @name close
* @function
*/
Piklor.prototype.close = function () {
this.elm.style.display = "none";
this.isOpen = false;
};
/**
* open
* Opens the color picker.
*
* @name open
* @function
*/
Piklor.prototype.open = function () {
this.elm.style.display = this.options.style.display;
this.isOpen = true;
};
/**
* colorChosen
* Adds a new callback in the colorChosen callback buffer.
*
* @name colorChosen
* @function
* @param {Function} cb The callback function called with the selected color.
*/
Piklor.prototype.colorChosen = function (cb) {
this.cbs.push(cb);
};
/**
* set
* Sets the color picker color.
*
* @name set
* @function
* @param {String} c The color to set.
* @param {Boolean} p If `false`, the `colorChosen` callbacks will not be called.
*/
Piklor.prototype.set = function (c, p) {
var self = this;
self.color = c;
if (p === false) { return; }
self.cbs.forEach(function (cb) {
cb.call(self, c);
});
};
root.Piklor = Piklor;
})(this);
window.addEventListener("load", function () {
var pk = new Piklor(".color-picker", [
"#1abc9c"
, "#2ecc71"
, "#3498db"
, "#9b59b6"
, "#34495e"
, "#16a085"
, "#27ae60"
, "#2980b9"
, "#8e44ad"
, "#2c3e50"
, "#f1c40f"
, "#e67e22"
, "#e74c3c"
, "#ecf0f1"
, "#95a5a6"
, "#f39c12"
, "#d35400"
, "#c0392b"
, "#bdc3c7"
, "#7f8c8d"
], {
open: ".picker-wrapper .btn"
})
, wrapperEl = pk.getElm(".picker-wrapper")
, header = pk.getElm(".selected-icon p")
, footer = pk.getElm("footer")
;
pk.colorChosen(function (col) {
wrapperEl.style.backgroundColor = col;
header.style.backgroundColor = col;
footer.style.backgroundColor = col;
});
});/* picker */
.color-picker {
background: rgba(255, 255, 255, 0.75);
padding: 10px;
border: 1px solid rgba(203, 203, 203, 0.6);
border-radius: 2px;
}
.color-picker > div {
width: 40px;
display: inline-block;
height: 40px;
margin: 5px;
border-radius: 100%;
opacity: 0.7;
}
.picker-wrapper {
padding: 20px;
}
.color-picker > div:hover {
opacity: 1;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<span class="selected-icon"><p class="icon-eight">Hello</i></span>
<div class="picker-wrapper">
<button class="btn btn-default">Select color</button>
<div class="color-picker">
</div>
</div>
答案 0 :(得分：0)
好。如果是这种情况，您的问题是p标签未关闭。
<span class="selected-icon"><p class="icon-eight">Hello</i></span>
你有一个＆＃34;我＆＃34;标签试图关闭领先＆＃34; p＆＃34;标签。改变这一点，你应该好好去。
同时更改
header.style.backgroundColor = col;
要
header.style.color = col;
达到理想的效果。