JavaScriptのCSS災禍 - DOMスタイリング

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)); 

私の問題は、私は「にsearchResults」のdivに追加されます異なる要素のスタイルを傾けることです。誰もがこのビットの価格をスタイルする方法の手がかりを持っていますか：

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

私はJavaScriptソースにclassnameと指定し、外部CSSファイルで実際にそのフォーマットを適用するようにします。

CSS

.styledElement { 
    font-weight: bold; 
} 

はJavaScript

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

Greg'sアプローチは、JavaScriptのソースですべてを行う必要がある場合は特にも良いです。

Answer 2

の代わりに：

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

使用

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

Answer 3

のようなものスクリプト全体：ヘルプみんなのため

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);