英文:
How to set multiple CSS style properties in p5.js?
问题
我正在尝试使我的输入字段具有黑色背景和白色文本，但我找不到关于可能的input.style()值的任何文档。我目前正在尝试：
input.style('background-color', '#121212', 'color', '#EEE')
背景颜色有效，但文本颜色不起作用。我按照参考文档使用相同的语法，所以我不确定为什么不起作用。
另外，如果有人能指引我在文档中找到.style()所有可能参数的地方，将不胜感激。
英文:
I'm trying to make my input field have a black background and white text, but I can't find any documentation for the possible values input.style() can take. I'm currently trying:
input.style('background-color', "#121212", 'color', "#EEE")
The background color works, but the text color doesn't. I followed the same syntax the reference uses so I'm not sure why.
Also if anyone could point me to where in the documentation it lists all the possible arguments for .style() it'd be much appreciated.
答案1
得分: 3
p5 style() 函数 只接受两个参数：属性名和属性值。您试图通过添加更多参数来设置额外的属性，这是不允许的。您需要将其拆分为两行，并分别设置每个属性。
input.style('background-color', "#121212");
input.style('color', "#EEE");
英文:
The p5 style() function takes only two arguments: the property name and the value. You are trying to set additional properties by adding more arguments, which you cannot do. You need to break this up into two lines and set each property individually.
input.style('background-color', "#121212")
input.style('color', "#EEE")
答案2
得分: 2
尝试使用两个单独的.style调用，分别用于设置你想要的两个属性：
function setup() {
noCanvas();
const inp = createElement("input");
inp.value("hello world");
inp.style("background", "yellow");
inp.style("color", "green");
// 或者链式调用：
inp
.style("background", "yellow")
.style("color", "green");
}
我更喜欢使用类和CSS样式表来进行样式设置，将展示和行为分离，这样可以更轻松地将样式应用于多个元素，而不必编写大量重复的JS代码：
function setup() {
noCanvas();
const inp = createElement("input");
inp.class("ugly");
inp.value("hello world");
}
.ugly {
background-color: yellow;
color: green;
}
还请注意，关于将输入命名为input：
p5.js 表示：你使用了一个p5.js保留的函数名 "input"，请确保将函数名更改为其他名称。
英文:
Try using two separate calls to .style, one for each property you want to set:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function setup() {
noCanvas();
const inp = createElement("input");
inp.value("hello world");
inp.style("background", "yellow");
inp.style("color", "green");
// or chained:
inp
.style("background", "yellow")
.style("color", "green");
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<!-- end snippet -->
I prefer to style with classes and a CSS stylesheet, separating presentation and behavior and making it easier to apply the style to many elements without writing a ton of repetitive JS:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function setup() {
noCanvas();
const inp = createElement("input");
inp.class("ugly");
inp.value("hello world");
}
<!-- language: lang-css -->
.ugly {
background-color: yellow;
color: green;
}
<!-- language: lang-html -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.6.0/p5.js"></script>
<!-- end snippet -->
Note also, with respect to naming an input input:
> p5.js says: you have used a p5.js reserved function "input" make sure you change the function name to something else.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论