如何 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 轉義符。

Answer 2

經過幾個小時的反復試驗，我終於完成了我的壯舉。 “秘密”是將 2 個樣式放在一個 console.log 中，代碼可能看起來像一個令人困惑的漂移，並且肯定會改進它。

 function icones(ico_nome,texto,style ){ // Captura o nome do icone, o estilo que sera utilizado eo 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

最終結果----控制台輸出還是不知道怎么把圖片直接插入到帖子里抱歉:)

Answer 3

使用 Jquery 函數.css()例如：

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