我可以在 JS 对象中设置文本样式吗？

Question

例如我有这个对象：

function getBadgeContent() {
    let os = detectOS();
    let obj = {};

    if( os == "android" ) {
        obj = {
            src: "----",
            href: "---",
            info: "Download app for Android"
        };
    } else if( os == "iOS" ) {
        obj = {
            src: "---",
            href: "---",
            info: "Download App for iOS"
        };
    } else {
        obj = {
            src: "---",
            href: "----",
            info: "Download App for Windows"
        };
    return obj;

}

    }

然后调用此对象（不确定这是否正确）。 并且根据用户所在的设备，在 HTML 页面中会显示不同的徽章。

function buildBadge() {
    let obj = getBadgeContent();
    let html = '';

    if( obj ) {
        html = obj.info + '<a target="_blank" href="'+ obj.href+'"><img src="' + obj.src + '" alt="store_badge" /></a>';
    }

    return html;

}

我想提供信息特定的样式。 基本上我希望文本显示在徽章上方并说“为您的特定设备下载”。

作为奖励，我想给每个徽章样式规则，以便它们的高度和宽度都相同。 但这可以在代码之外完成。

谢谢！

Answer 1

例如，您可以使用样式属性<a style="height: 100px"></a>向 'a'(anchor) 元素添加样式，然后将样式属性中的 css 作为新属性添加到您的json 对象。

Answer 2

您可以通过减少重复来大大缩短您的功能。

而且，正如您在我的小演示中看到的，在 CSS 中进行所有格式化。

 function addBadge(ev){ let OO={android:['androidforums','href4android.html','android'], iOS:['apple','iOS_href.html','iOS'], win10:['microsoft','win10_href.html','windows']}; var o=OO[detectOS()]||OO.win10; document.getElementById('main').innerHTML+='<div class="badge">Download app for '+o[2] +'<br><a href="'+o[1]+'"><img src="//logo.clearbit.com/'+o[0]+'.com"></a></div>'; } var i=0; function detectOS(){ // dummy function return ['android','iOS'][i++%3]; } document.getElementById('add').addEventListener('click',addBadge)

 .badge {display:inline-block; height:80px;width:200px; background-color:#ccc; text-align:center; margin:6px} .badge img {height:32px;}

 <button id="add">add</button> <div id="main"></div>