Могу ли я оформить текст внутри объекта JS? - PullRequest
Новая
       6

Могу ли я оформить текст внутри объекта JS?

0 голосов
/ 01 февраля 2020

Например, у меня есть этот объект: 

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 speci c styleling. По сути, я хочу, чтобы текст отображался над значком и говорил: «Загрузите для вашего устройства c».

В качестве бонуса я хотел бы дать каждому стилю правила для каждого значка, чтобы они были одинаковой высоты и ширины. Но это может быть сделано вне кода.

Спасибо!

Ответы [ 2 ]

1 голос
/ 01 февраля 2020

Вероятно, вы можете немного сократить свои функции, вырезав повторы.

И, как вы можете видеть в моей небольшой демонстрации, выполните все форматирование в 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>
1 голос
/ 01 февраля 2020

Например, вы можете добавить стили к элементу 'a' (якорь) с атрибутом стиля <a style="height: 100px"></a> и просто добавить css, который входит в атрибут style, как новое свойство к вашему json объекту.

...