JavaScript CSS Woes - DOM Styling

Question

У меня есть следующее как часть сценария:

// JSON object out into DOM Nodes, and appends them to 'searchResults' DIV)
var amzJSONCallback = function(tmpData) {
    if (tmpData.Item) {
        var dv = cel('div');
        var gDiv = getEl('searchResults');
        gDiv.innerHTML = "";
        var tmpItem = tmpData.Item

        var ig = cel('img');
        ig.setAttribute('src', tmpItem.thumburl);
        ig.setAttribute('alt', tmpItem.title);
        ig.style.cssText = "border:0px;height:" + tmpItem.thumbdims[0] + "px;width:" + tmpItem.thumbdims[1] + "px";
        var a = cel('a');
        a.setAttribute('href', tmpItem.url);
        a.appendChild(ig);
        var dv2 = cel('div');
        dv2.style.cssText = "text-align:center;";
        dv2.appendChild(a);
        gDiv.appendChild(dv2);

        var a = cel('a');
        a.setAttribute('href', tmpItem.url);
        a.appendChild(ctn(tmpItem.title));
        dv.appendChild(a);
        if (tmpItem.price) {
            dv.appendChild(ctn(tmpItem.price));
        } else if (tmpItem.lowestnewprice) {
            dv.appendChild(ctn(" - " + tmpItem.lowestnewprice));
        } else if (tmpItem.lowestusedprice) {
            dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
        }
        gDiv.appendChild(dv);

        if (tmpItem.desc) {
            // RegEx used to strip out extraneous HTML and Entities in Description text
            tmpItem.desc = tmpItem.desc.replace(/<.*?>/gi, '');
            tmpItem.desc = tmpItem.desc.replace(/&.*?;/gi, ' ');
            if (tmpItem.desc.length > 121) {
                tmpItem.desc = tmpItem.desc.substr(0, 120) + "..."
            }


            gDiv.appendChild(cel('br'));
            gDiv.appendChild(ctn(tmpItem.desc));

Моя проблема в том, что я не могу стилизовать различные элементы, которые добавляются в div "searchResults". У кого-нибудь есть какие-либо подсказки о том, как стилизовать цену в этом бите:

if (tmpItem.price) {
    dv.appendChild(ctn(tmpItem.price));
} else if (tmpItem.lowestnewprice) {
    dv.appendChild(ctn(" - " + tmpItem.lowestnewprice));
} else if (tmpItem.lowestusedprice) {
    dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
}

Любая помощь будет принята с благодарностью.

Answer 1

Я бы указал classname в источнике JavaScript и позволил внешнему файлу CSS позаботиться о фактическом применении к нему форматирования.

CSS

.styledElement {
   font-weight: bold;
}

JavaScript

var eItem = ctn(tmpItem.price);
eItem.className = "styledElement";
dv.appendChild(eItem);

Подход Грега также хорош, особенно если вам приходится делать все в исходном коде JavaScript.

Answer 2

Весь скрипт:

function getEl(x){return document.getElementById(x)}
function ctn(x){ return document.createTextNode(x) }
function cel(x){ return document.createElement(x) }
function addEvent(obj,type,fn){
    if (obj.addEventListener){ obj.addEventListener(type,fn,false)}
    else if (obj.attachEvent){
        obj["e"+type+fn] = fn;
        obj.attachEvent("on"+type,function(){obj["e"+type+fn]();});
    }
}


function JSONscriptRequest(fullUrl) {
  this.fullUrl = fullUrl;
  this.noCacheIE = '&noCacheIE=' + (new Date()).getTime();
  this.headLoc = document.getElementsByTagName("head").item(0);
  this.scriptId = 'azScriptId' + JSONscriptRequest.scriptCounter++;
}
JSONscriptRequest.scriptCounter = 1;
JSONscriptRequest.prototype.buildScriptTag = function () {
  this.scriptObj = document.createElement("script");
  this.scriptObj.setAttribute("type", "text/javascript");
  this.scriptObj.setAttribute("src", this.fullUrl + this.noCacheIE);
  this.scriptObj.setAttribute("id", this.scriptId);
}
JSONscriptRequest.prototype.removeScriptTag = function () {
  this.headLoc.removeChild(this.scriptObj);
}
JSONscriptRequest.prototype.addScriptTag = function () {
  this.headLoc.appendChild(this.scriptObj);
}

var amzJSONCallback = function(tmpData){
    if(tmpData.Item){
        var dv = cel('div');
        var gDiv = getEl('searchResults');
        gDiv.innerHTML="";
        var tmpItem = tmpData.Item

        var ig = cel('img');
        ig.setAttribute('src',tmpItem.thumburl);
        ig.setAttribute('alt',tmpItem.title);
        ig.style.cssText = "border:0px;height:"+tmpItem.thumbdims[0]+"px;width:"+tmpItem.thumbdims[1]+"px";
        var a = cel('a');
        a.setAttribute('href',tmpItem.url);
        a.appendChild(ig);
        var dv2 = cel('div');
        dv2.style.cssText = "text-align:center;";
        dv2.appendChild(a);
        gDiv.appendChild(dv2);

        var a = cel('a');
        a.setAttribute('href',tmpItem.url);
        a.appendChild(ctn(tmpItem.title));
        dv.appendChild(a);

        if(tmpItem.price)
        {
        dv.appendChild(ctn(tmpItem.price));
        }

        else if(tmpItem.lowestnewprice)
        {   

        // ADDED CLASSNAME HERE

        var eItem = tmpItem.lowestnewprice;
        eItem.className = "price";
        dv.appendChild(ctn(" - " + eItem));             
        }

        else if(tmpItem.lowestusedprice)
        {
        dv.appendChild(ctn(" - " + tmpItem.lowestusedprice + " (used)"));
        }

        gDiv.appendChild(dv);

        if(tmpItem.desc){

            tmpItem.desc = tmpItem.desc.replace(/<.*?>/gi,'');
            tmpItem.desc = tmpItem.desc.replace(/&.*?;/gi,' ');
            if(tmpItem.desc.length>121)
            {
            tmpItem.desc=tmpItem.desc.substr(0,120)+"..."
            }

            // ADDED CLASSNAME HERE

            gDiv.appendChild(cel('br'));
            var DItem = tmpItem.desc;
            DItem.className = "price";
            gDiv.appendChild(ctn(DItem));               

        }
    }
}


var amazonSearch = function(){
        var request = 'http://webservices.amazon.co.uk/onca/xml?Service=AWSECommerceService&SubscriptionId=19267494ZR5A8E2CGPR2&AssociateTag=mikita18v-21&Operation=ItemLookup&Style=http://www.virtualmedia.ie/json/ajsonSingleAsin.xsl&ContentType=text/javascript&IdType=ASIN&ItemId=' + gbAmazonAsin + '&ResponseGroup=Medium,ItemAttributes,OfferFull&CallBack=amzJSONCallback';
        aObj = new JSONscriptRequest(request);
        aObj.buildScriptTag();
        aObj.addScriptTag();
}


var gbAmazonAsin = "<?php echo $productcode; ?>";


addEvent(window,"load",amazonSearch);

Answer 3

Вместо:

dv.appendChild(ctn(tmpItem.price));

используйте что-то вроде

var elm = ctn(tmpItem.price);
elm.style.color = 'red';
elm.className = 'amazon-price';
dv.appendChild(elm);