您好，我需要具备使用滑块更改边框颜色的功能。从下面的代码中，您可以看到我做了什么。所有其他CSS属性都可以正常工作。使用与我使用字体颜色相同的代码来更改边框颜色应该可以，但不能。我在这里做什么错了？
function changefontColor(){
let red = document.getElementById('rangefontRed').value;
let green = document.getElementById('rangefontGreen').value;
let blue = document.getElementById('rangefontBlue').value;
let color = 'rgb(' + red + ',' + green + ',' + blue + ')';
document.body.style.color = color;
document.getElementById('colorfontOutput').innerHTML=': ' + color;
}
document.getElementById('rangefontRed').addEventListener('input',changefontColor);
document.getElementById('rangefontGreen').addEventListener('input',changefontColor);
document.getElementById('rangefontBlue').addEventListener('input',changefontColor);
function changeborderColor(){
let red = document.getElementById('rangebordercolorRed').value;
let green = document.getElementById('rangebordercolorGreen').value;
let blue = document.getElementById('rangebordercolorBlue').value;
let color = 'rgb(' + red + ',' + green + ',' + blue + ')';
//document.body.style.border =({"border":"2px solid" +color });attempt 1
//document.body.style.css({"border":"2px solid" +color });attempt 2
//document.body.style.borderColor=color; attempt 3
$('p').css('border-bottom-color',+ color ); //final attempt (not working)
document.getElementById('colorborderOutput').innerHTML=': ' + color;
}
document.getElementById('rangebordercolorRed').addEventListener('input',changeborderColor);
document.getElementById('rangebordercolorGreen').addEventListener('input',changeborderColor);
document.getElementById('rangebordercolorBlue').addEventListener('input',changeborderColor);
//Border Width script
$('#borderw').on('input', function() {
var Bordervar = $(this).val();
$("#idborderwidth").text("Border Width: " + Bordervar);
$('p').css('border-width', Bordervar + 'px')
}); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Select Font Color</button>
<div class="dropdown-content">
<p1 style="background-color: lightblue;">Font Color</p1><BR/>
<input type="range" id="rangefontRed" value="0" min="0" max="255" class="slider">
<p1>Red:</p1><br/>
<input type="range" id="rangefontGreen" value="0" min="0" max="255" class="slider">
<p1>Green:</p1><br/>
<input type="range" id="rangefontBlue" value="0" min="0" max="255" class="slider">
<p1>Blue:</p1> <br/>
<p1 id="idborderwidth">Border Width</p1><br/>
<input id="borderw" type="range" value="0" min="0" max="100" step="1" class="slider" /><br/>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Select border Color</button>
<div class="dropdown-content">
<p1 style="border-color: : lightblue;">Border Color</p1><BR/>
<input type="range" id="rangebordercolorRed" value="0" min="0" max="255" class="slider">
<p1>Red:</p1><br/>
<input type="range" id="rangebordercolorGreen" value="0" min="0" max="255" class="slider">
<p1>Green:</p1><br/>
<input type="range" id="rangebordercolorBlue" value="0" min="0" max="255" class="slider">
<p1>Blue:</p1> <br/>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat sollicitudin ligula maximus faucibus. Praesent nec dui ipsum. Sed interdum eros at mi feugiat, finibus efficitur dolor semper. Maecenas sed suscipit nulla, non venenatis erat. Aenean sodales, lorem eu pretium fringilla, nibh tellus pellentesque nibh, aliquam venenatis odio mi at mi. Ut vehicula augue tellus, vel finibus felis tristique id. Ut consequat feugiat cursus. Vestibulum vestibulum purus arcu, at rhoncus nisi dapibus eget. Donec elementum ligula eu metus tempor venenatis. Ut interdum mattis ornare. Curabitur non turpis sed sem tristique pharetra ut at eros.</p>
很抱歉，代码太长，但需要向您展示我在做什么和尝试过什么 任何更正或建议将不胜感激
谢谢
答案 0 :(得分：0)
也许尝试这样的事情：
//Font color script
$('#rangefontRed,#rangefontGreen,#rangefontBlue').on('input', function () {
let color = [$('#rangefontRed').val(), $('#rangefontGreen').val(), $('#rangefontBlue').val()];
updateSpan($(this))
$(this).parents('.dropdown-content').find('div:eq(0) span').text('rgb(' + color.join(', ') + ')');
$('#Example').css('color', 'rgb(' + color.join(', ') + ')');
});
//Border color script
$('#rangebordercolorRed,#rangebordercolorGreen,#rangebordercolorBlue').on('input', function () {
let color = [$('#rangebordercolorRed').val(), $('#rangebordercolorGreen').val(), $('#rangebordercolorBlue').val()];
updateSpan($(this))
$(this).parents('.dropdown-content').find('div:eq(0) span').text('rgb(' + color.join(', ') + ')');
$('#Example').css('border-color', 'rgb(' + color.join(', ') + ')');
});
//Border Width script
$('#borderw').on('input', function () {
updateSpan($(this))
$('#Example').css('border-width', $(this).val() + 'px')
});
function updateSpan(el) {
$(el).parent().find('span span').text($(el).val());
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="dropdown">
<button class="dropbtn">Select Font Color</button>
<div class="dropdown-content">
<div>Font Color: <span></span></div>
<div>
<input type="range" id="rangefontRed" value="0" min="0" max="255" class="slider" />
<span>Red: <span>0</span></span>
</div>
<div>
<input type="range" id="rangefontGreen" value="0" min="0" max="255" class="slider" />
<span>Green: <span>0</span></span>
</div>
<div>
<input type="range" id="rangefontBlue" value="0" min="0" max="255" class="slider" />
<span>Blue: <span>0</span></span>
</div>
<div>Border Width</div>
<div>
<input id="borderw" type="range" value="0" min="0" max="100" step="1" class="slider" />
<span>Width: <span>1</span>px</span>
</div>
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Select border Color</button>
<div class="dropdown-content">
<div>Border Color: <span></span></div>
<div>
<input type="range" id="rangebordercolorRed" value="0" min="0" max="255" class="slider" />
<span>Red: <span>0</span></span>
</div>
<div>
<input type="range" id="rangebordercolorGreen" value="0" min="0" max="255" class="slider" />
<span>Green: <span>0</span></span>
</div>
<div>
<input type="range" id="rangebordercolorBlue" value="0" min="0" max="255" class="slider" />
<span>Blue: <span>0</span></span>
</div>
</div>
</div>
<div id="Example" style="border: 1px solid #000">Example</div>
答案 1 :(得分：0)
我对这个问题的处理方式如下，并尽可能简化：
/*
creating helper functions in addition to the existing functions
*/
const output = (prop, val) => {
/* this function takes two arguments is used to set/update the
relevant CSS property-name ('prop') on the <body> element,
setting the property-value to that contained in the 'val'
argument: */
document.body.style.setProperty(prop, val);
},
/* nobody enjoys typing 'document.getElementById(...) multiple times,
so I wrote a simple function that retrieves an element by its
ID, passed to the function as the 'ident' argument: */
retrieve = (ident) => {
return document.getElementById(ident);
};
function changefontColor() {
/* here I used a comma-separated assignemnt of the various
variabls using the 'let' declaration, mostly because
it's less typing; also we use the defined retrieve()
helper-function to get the various elements, and then
find their value: */
let red = retrieve('rangefontRed').value,
green = retrieve('rangefontGreen').value,
blue = retrieve('rangefontBlue').value,
/* here we use a template literal rather than string
concatenation to interpolate JavaScript variables
directly within the String we create: */
color = `rgb(${red},${green},${blue})`;
/* using the output() helper-function to update the
'--color' property of the <body> element, and set
that property's value to that of the 'color'
variable: */
output('--color', color);
}
function changeBorder() {
/* this function works much the same way as the above function;
I chose not to combine the functions to retain some of the
simplicity, and more easily explain the answer; you may wish
to combine functionality though: */
let red = retrieve('rangebordercolorRed').value,
green = retrieve('rangebordercolorGreen').value,
blue = retrieve('rangebordercolorBlue').value,
color = `rgb(${red},${green},${blue})`,
width = retrieve('borderw').value,
border = `${width}px`;
/* updating the various properties and their associated values: */
output('--borderWidth', border);
output('--borderColor', color);
}
/* here we use document.querySelectorAll() along with NodeList.prototype.forEach()
to facilitate event-binding; we first find all the <input> elements that have
a custom data-role attribute with an attribute-value equal to 'changeFontColor' */
document.querySelectorAll('.dropdown input[data-role=changeFontColor]').forEach(
/* then, using an Arrow function, we pass in the current Node of the NodeList
over which we're iterating to the function: */
(elem) => {
/* and here we use EventTarget.addEventListener() to bind the
changefontColor as the event-handler for the 'input' event: */
elem.addEventListener('input', changefontColor)
});
/* a different function is bound to different elements, but otherwise this
is exactly the same as above: */
document.querySelectorAll('.dropdown input[data-role=changeBorder]').forEach(
(elem) => {
elem.addEventListener('input', changeBorder)
});/*
Setting the baseline presentation for all elements (and the ::before and
::after pseudo-elements) in the document:
*/
*,
::before,
::after {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: Ubuntu, Calibri, sans-serif;
font-size: 1rem;
font-weight: 400;
line-height: 1.4;
}
/*
setting the display of 'flex' on the dropdown-wrap element that I added
in order to separate the dropdowns from the content of the page in order
to enable hiding/showing of the various dropdowns:
*/
.dropdown-wrap {
display: flex;
/* allows the content of the element to wrap to new lines when
necessary: */
flex-wrap: wrap;
/* aligns the content to the horizontal center: */
justify-content: center;
/* assigns a gap between 'rows' (0.2em) and between 'columns'
0.5em: */
gap: 0.2em 0.5em;
}
label {
/* in some displays the text of the <label> would be separated
from the <input>, which created a visually disjointed
appearance; here we force the content to show on one line: */
white-space: nowrap;
/* to draw attention to the interactive nature of the <label>
elements: */
cursor: pointer;
}
/*
We're using an input-hack to toggle the display of the
dropdowns without relying on JavaScript; here we're hiding
the radion <input> elements off-screen:
*/
input[name="dropdown"] {
position: absolute;
top: -1000px;
left: -1000px;
}
/*
Styling the <label> elements that immediately follow an
<input> element whose name is equal to 'dropdown', here
we approximate the look of a <button> element:
*/
input[name=dropdown]+label {
border: 1px solid #000;
border-radius: 0.3em;
padding: 0.2em 0.3em;
}
/*
Clicking the <label> will check/uncheck the associated
<input> if that element is of type="radio" or
type="checkbox"; so this allows us to style the <label>
in the event that the <input> is checked, giving it an
'activated'/'on' appearance:
*/
input[name=dropdown]:checked + label {
color: #36f;
}
.dropdown {
width: 100%;
}
h2 {
background-color: lightblue;
}
.dropdown-content {
width: 90%;
margin: 0.4em auto;
}
p {
/* styling the color of the <p> element(s) to be equal to the
property-value of the custom '--color' property or, if that
property isn't found or isn't valid, equal to the value
inherited from its parent: */
color: var(--color, inherit);
/* here we do much the same, except we're using the 'border'
shorthand to style the border; we assign the value of the
custom '--borderWidth' property as the border-width or, if
that's not available or valid we set the value to a default
of 0; the border-color property is set in the same way as above,
but the default is 'currentColor', which is equal to the currently-
assigned 'color' value: */
border: var(--borderWidth, 0) solid var(--borderColor, currentColor);
}
/* hiding the dropdown elements on page-load: */
div[data-content] {
display: none;
}
/* when the #dropdown-font element (the <input> elements that are used in
the <input> hack (above) the subsequent div.dropdown element with
the attribute of 'data-content' equal to 'font' is displayed: */
#dropdown-font:checked ~ div.dropdown[data-content=font] {
display: block;
}
/* As above, but with the #dropdown-border element affecting the
[data-content=border] element: */
#dropdown-border:checked ~ div.dropdown[data-content=border] {
display: block;
}<div class="dropdown-wrap">
<!-- grouping the various <input> and <label> elements to toggle the visibility
of the dropdowns together as siblings of the div.dropdown elements of which
they ultimately affect the style of: -->
<input class="hiddenRadioHack" id="dropdown-font" type="checkbox" name="dropdown">
<label for="dropdown-font" class="dropbtn">Select Font Color</label>
<input class="hiddenRadioHack" id="dropdown-border" type="checkbox" name="dropdown">
<label for="dropdown-border" class="dropbtn">Select Border Color</label>
<!-- adding a custom data-* attribute to the element, in order to distinguish
the two .dropdown elements in the CSS: -->
<div class="dropdown" data-content="font">
<div class="dropdown-content">
<h2>Font Color</h2>
<!-- wrapping the <input> elements within the associated <label> to more
easily style the elements and control their wrapping: -->
<label for="rangefontRed">Red:
<!-- added a 'data-role' custom attribute, for an easier and less-verbose
means of binding event-handling: -->
<input type="range" data-role="changeFontColor" id="rangefontRed" value="0" min="0" max="255" class="slider">
</label>
<label for="rangefontGreen">Green:
<input type="range" data-role="changeFontColor" id="rangefontGreen" value="0" min="0" max="255" class="slider">
</label>
<label for="rangefontBlue">Blue:
<input type="range" data-role="changeFontColor" id="rangefontBlue" value="0" min="0" max="255" class="slider">
</label>
</div>
</div>
<div class="dropdown" data-content="border">
<div class="dropdown-content">
<h2>Border Color</h2>
<label for="rangebordercolorRed">Red:
<input type="range" data-role="changeBorder" id="rangebordercolorRed" value="0" min="0" max="255" class="slider">
</label>
<label for="rangebordercolorGreen">Green:
<input type="range" data-role="changeBorder" id="rangebordercolorGreen" value="0" min="0" max="255" class="slider">
</label>
<label for="rangebordercolorBlue">Blue:
<input type="range" data-role="changeBorder" id="rangebordercolorBlue" value="0" min="0" max="255" class="slider">
</label>
<label for="borderw">Border Width:
<input id="borderw" data-role="changeBorder" type="range" value="0" min="0" max="100" step="1" class="slider">
</label>
</div>
</div>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse placerat sollicitudin ligula maximus faucibus. Praesent nec dui ipsum. Sed interdum eros at mi feugiat, finibus efficitur dolor semper. Maecenas sed suscipit nulla, non venenatis erat.
Aenean sodales, lorem eu pretium fringilla, nibh tellus pellentesque nibh, aliquam venenatis odio mi at mi. Ut vehicula augue tellus, vel finibus felis tristique id. Ut consequat feugiat cursus. Vestibulum vestibulum purus arcu, at rhoncus nisi dapibus
eget. Donec elementum ligula eu metus tempor venenatis. Ut interdum mattis ornare. Curabitur non turpis sed sem tristique pharetra ut at eros.</p>
参考：