如何console.log多个对象?

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何console.log多个对象?相关的知识,希望对你有一定的参考价值。

我正在创建一个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

enter image description here

答案

我不确定这是否是您要寻找的,但是您可以使用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转义符。

另一答案

在反复试验几个小时之后,我得以完成我的壮举。“秘密”是将两种样式仅放在一个console.log中,该代码看起来似乎是一个令人困惑的漂移,并且肯定会加以改进。

function icones(ico_nome,texto,style ){ // Captura o nome do icone, o estilo que sera utilizado e o texto
    switch(ico_nome) { // Check argument icon
        case 'user':
            ico_nome = '%c ' // Icon will only be displayed after CSS declaration
            font_icon = 'font-family:"Font Awesome 5 Free"; font-weight: 900; font-size: 20px;' //Declara a fonte para visualização
        break
    }  
    switch(style) { // Styling text
        case 'titulo': // Set styles for titles
            font_icon += 'color:red;' //Set the color Red to Icon
            style_text = 'color:blue; font-family: Arial;' // Set styles for texts
        break
        default: 
            font_icon += 'color: black' // Set default color
    }
    console.log(ico_nome + ' ' + '%c' + texto,font_icon,style_text)  //Join the 2 styles and reveal the output
}
icones('user','Usuario', 'titulo') //Applying values to function
另一答案

使用Jquery函数.css()例如:

$("#element").css("font-size", "20pt")

以上是关于如何console.log多个对象?的主要内容,如果未能解决你的问题,请参考以下文章

js中如果省略分号那么它是如何运行的

前端开发常用js代码片段

jQuery学习手册

jacript var let const 区别

将函数写入console.log,如何传递多个值? [复制]

console调试技巧