Javascript CSS Woes - DOM Styling

Question

Hey,

I have the following as part of a script:

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

My problem is that I cant style the different elements that get added to the "searchResults" div. Does anyone have any clues on how to style the price in this bit:

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

Any help would be greatly appreciated.

Answer 1

I would specify a classname in the JavaScript source and let an external CSS file take care of actually applying the formatting to it.

CSS

.styledElement {
   font-weight: bold;
}

JavaScript

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

Greg's approach is also good especially if you have to do everything in the JavaScript source.

Answer 2

Instead of:

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

use something like

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

Answer 3

The Whole script:

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&amp;SubscriptionId=19267494ZR5A8E2CGPR2&amp;AssociateTag=mikita18v-21&amp;Operation=ItemLookup&amp;Style=http://www.virtualmedia.ie/json/ajsonSingleAsin.xsl&amp;ContentType=text/javascript&amp;IdType=ASIN&amp;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);