javascript - 如何 console.log 多个对象？

Question

我正在创建一个 javascript 练习，我的想法是创建一个可以返回图标的函数，为此我使用了 FontAwesome。我设法让它显示图标和消息，但我想通过一个函数为标题、强调等添加我预定义的样式，但我仍然想不出一种形式。我什至尝试使用 Swith，但它只将 css 复制为任何字符串

function icones(ico_name, text,style ){ // Capture icon name, style to be used and text
    switch(ico_name) { //Check argument icon
        case 'user':
            ico_name = '%c ' //Icon will only be displayed after CSS declaration
            font = 'font-family: "Font Awesome 5 Free"; font-weight: 900; font-size: 20px; content: "\f434";'
        break
    }  
    switch(style) { // Styling text
        case 'title':
            text = 'color: red'
        break
    }
    console.log(ico_name,font,text) 
}
icones('user','player', 'title') //Applying values to function

Answer 1

我不确定这是否是您要查找的内容，但您可以使用 document.getElementById() 获取网页中的元素，然后应用 CSS 样式。

例如，如果您尝试更改其字体的元素的 id 属性设置为 "changeMyFont":

<span id="changeMyFont"></span>

您可以使用 JavaScript 更改其 CSS 属性:

var elem = document.getElementById("changeMyFont");
elem.style.fontFamily = "Font Awesome 5 Free";
elem.style.fontWeight = 900;
elem.style.fontSize = "20px";

要将某个元素的文本颜色更改为红色，您可以按照相同的步骤进行操作。要更改 HTML 标记内的内容，请使用 innerHTML(不允许用户在此处输入；这是一种 XSS 威胁):

document.getElementById("elementToChange").innerHTML = "HTML here";

您可以在其中使用 HTML 转义符。