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;

}

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

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

谢谢！

Answer 1

您可以使用样式属性将样式添加到'a'（锚）元素中以<a style="height: 100px"></a>为例，只需将style属性中的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>

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

2 个答案: