www.webdeveloper.com
Results 1 to 11 of 11

Thread: [RESOLVED] JavaScript get styles

Hybrid View

  1. #1
    Join Date
    Jan 2010
    Posts
    10

    resolved [RESOLVED] JavaScript get styles

    I've been using the code below to truncate text in a div when it's too long.

    It copies the style and text from the div to another hidden div in the page. It then iterates through shortening the string until the second div reaches the desired height.

    The code works, except for the part where it copies across the styles. The alerts just show a blank message box. The font and font size are set in an external CSS file.

    I've been Googling all morning, but this appears to be the only way that I can find to get the styles.

    Does anyone know why it isn't working?

    Code:
    function checkFont(el) {
    ***var divCheck = document.getElementById("font-checker");
    ***var txtCheck = document.getElementById(el);
    
    ***divCheck.style.width = txtCheck.offsetWidth+"px";
    ***alert(txtCheck.style.fontSize);
    ***alert(txtCheck.style.fontFamily);
    ***divCheck.style.fontSize = txtCheck.style.fontSize;
    ***divCheck.style.fontFamily = txtCheck.style.fontFamily;
    
    ***var orgText = txtCheck.innerHTML;
    ***divCheck.innerHTML = txtCheck.innerHTML;
    
    ***var orgHeight = txtCheck.offsetHeight;
    ***var divHeight = divCheck.clientHeight;
    
    ***var stringLen = orgText.length - 1;
    ***var newString = orgText;
    
    ***while (divHeight>orgHeight+20) {
    ***	newString = orgText.substring(0, stringLen) + "...";
    ***	
    ***	divCheck.innerHTML = newString;
    ***	divHeight = divCheck.clientHeight;
    		
    ***	stringLen = stringLen - 1;
    ***}
    ***txtCheck.innerHTML = newString;
    }
    Thanks for any help.

    0d085d

  2. #2
    Join Date
    Oct 2006
    Posts
    939
    Put the styles inline with the tag and see the style.
    (just do it on one tag to see it happen)

  3. #3
    Join Date
    Jan 2010
    Posts
    10
    Sorry? I'm afraid I don't quite understand. The style of the first div is this, if that's what you wanted:

    .description {
    width: 109px;
    height: 92px;
    float: left;
    background-color: #1380a1;
    font-family: Calibri;
    font-size: 10pt;
    margin-left: 2px
    }

    Thanks for the reply though.

    0d085d

  4. #4
    Join Date
    Jan 2010
    Posts
    10
    Actually, I think I see what you're saying.

    I did change the style of the hidden div to visible thus I know that it's not changing the style.

    The text is just the default font and size.

    Is that what you meant?

    0d085d

  5. #5
    Join Date
    Oct 2006
    Posts
    939
    Yes but, javascript doesn't know CSS.
    You need to write a code to let javascript in on the game. Until then try your styles inside the div tag to see if your checkFont is working
    <div style="width: 109px;height: 92px;font-family: Calibri;...more...">...stuff here...</div>

  6. #6
    Join Date
    May 2010
    Posts
    109
    Am I missing something?

    Why aren't you just setting the overlfow to hidden?

    Why try to re-adjust the height / length?

    Code:
    .description {
    width: 109px;
    height: 92px;
    float: left;
    background-color: #1380a1;
    font-family: Calibri;
    font-size: 10pt;
    margin-left: 2px
    overflow: hidden;
    }

  7. #7
    Join Date
    Jan 2010
    Posts
    10
    Ah, I see. That's really helpful, thanks.

    It works perfectly with the style already applied. I just had to remove the +20 from while (divheight > orgheight+20);

    I don't want to try and make you solve the whole problem for me, but could you possibly give me a slight pointer as to this JavaScript code?

    Thanks a lot, you've been extremely helpful.



    Westerly: there's a grid of these little divs where the text has to stay within the tiny little spaces allowed. Thanks for drawing my attention to the overflow property, I'm just looking into it.

  8. #8
    Join Date
    Jan 2010
    Posts
    10
    It would seem the overflow was set to hidden in a parent object somewhere anyway. It results in half-lines of text at the bottom of the divs which don't look particularly pretty. I'd quite like the ellipses as well.

    Thanks for the suggestion.

  9. #9
    Join Date
    May 2010
    Posts
    109
    Otherwise, is this what you are trying to do?

    Has an ID:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    	
    	function getStyle(el, cssprop){
     	
    		if (el.currentStyle) //IE
    			{
      			 return el.currentStyle[cssprop];
    			}
     		else if (document.defaultView.getComputedStyle) //Firefox
    			{
      			 return document.defaultView.getComputedStyle(el, "")[cssprop];
    			}
     		else //try and get inline style
    			{
      			 return el.style[cssprop];
    			}
    	}
    	
    	function init(){
    
    		var box = document.getElementById('box');
    		alert(getStyle(box, "width"));
    	}
    
    	navigator.appName == "Microsoft Internet Explorer" ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">
    
    	#box {width: 200px; height: 185px; border: 1px solid black; background-color: blue;}
    
    
    </style>
    </head>
    	<body>
    		<div id="box"></div>
    	</body>
    </html>

    Doesn't have an ID:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>None</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">	
    	
    	var IE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
    	
    	function init(){
    
    		IE ? nRule = document.styleSheets[0].rules : nRule = document.styleSheets[0].cssRules;
    		for (i=0; i<nRule.length; i++)
    			{
    			 if (nRule[i].selectorText == ".testClass")
    				{
    				 alert('Width = ' + nRule[i].style.width + '\nHeight = ' +nRule[i].style.height);
    				 nRule[i].style.backgroundColor = "#f0fff0";				 
    				}		
    			}
    	}
    
    	IE ? attachEvent('onload', init, false) : addEventListener('load', init, false);	
    
    </script>
    <style type="text/css">	
    	
    	 body {background-color: #fffacd; margin-top: 60px;}
    	.testClass {float: left; width: 200px; height: 150px; margin-right: 15px;
    		    border: 1px solid black; background-color: #ff69b4; font-size: 16pt; color: blue;}	
    	
    </style>
    </head>
    	<body>
    		
    		<div class="testClass">Now is the time for all good men to come to the aid of their country.</div>
    
    
    		<div class="testClass">That's one small step for man, one giant leap for mankind.</div>
    
    	</body>
    </html>

  10. #10
    Join Date
    Jan 2010
    Posts
    10
    Yes! That's exactly what I was trying to do! I was sure I'd got JavaScript styles like I was trying to before, but I must have done something else or not used it in the end.

    Thank you ever so much, both of you, for all your help. My faith in forums has been greatly increased.

    0d085d

  11. #11
    Join Date
    Oct 2006
    Posts
    939
    This might work unless there are external style sheets, and both documents seem to need to be in the same directory for firefox.

    Place this button somewhere in your html
    HTML Code:
    <input type=button onclick="styWin=window.open('openMe.html','styWin','top=15px, left=20px, width=350, height=375, location, menubar, scrollbars, toolbar, resizable, status');"
     value="styler">
    This is the window that opens, save it as openMe.html

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    	"http://www.w3.org/TR/html4/strict.dtd">
    <HTML>
    <HEAD><TITLE>openMe</TITLE>
    <META http-equiv=Content-Type content="text/html; charset=UTF-8">
    <STYLE type=text/CSS>
    
    </STYLE>
    <SCRIPT type="text/javascript">
    
    </SCRIPT>
    <META content="MSHTML 6.00.2900.2963" name=GENERATOR></HEAD>
    <BODY>
    
    	<div id="w">click any element on opener</div>
    
    <SCRIPT type="text/javascript">
    	var nRule;
    	if(navigator.appName=='Microsoft Internet Explorer'){   nRule = opener.document.styleSheets[0].rules}
    	else{							nRule = opener.document.styleSheets[0].cssRules}
    
    	var s3=new Array('backgroundAttachment','backgroundColor','backgroundImage','backgroundPosition','backgroundRepeat','borderColor','borderTopColor','borderRightColor','borderBottomColor','borderLeftColor','borderStyle','borderTopStyle','borderRightStyle','borderBottomStyle','borderLeftStyle','borderWidth','borderTopWidth','borderRightWidth','borderBottomWidth','borderLeftWidth','margin','marginTop','marginRight','marginBottom','marginLeft','padding','paddingTop','paddingRight','paddingBottom','paddingLeft','clear','cssFloat','cursor','display','height','overflow','verticalAlign','visibility','width','listStyle','listStyleType','listStylePosition','listStyleImage','bottom','left','position','right','top','zIndex','borderCollapse','tableLayout','color','font','fontFamily','fontSize','fontStyle','fontVariant','fontWeight','letterSpacing','lineHeight','textAlign','textDecoration','textIndent','textTransform','whiteSpace','wordSpacing');
    	var elem; var inx;
    
    function rplc(s,o,n){	while(s.indexOf(o)!=-1){s = s.replace(o,n);} return s}
    
    function pjt(e){  
    	var e=e? e : opener.window.event;
    	var event_element=e.target? e.target : e.srcElement;
    
    	eet=event_element.tagName
    	tn=opener.document.getElementsByTagName(eet);
    	for(i=0;i<tn.length;i++){if(tn[i]===event_element){elem=eet; inx=i;}}
      if(elem=='HTML'){elem='BODY'}
    	var k=''+elem+'['+inx+']<br>';
    	document.getElementById('w').innerHTML=getCSSstyle(elem,inx)
    }
    
    function getCSSstyle(elem,inx){ var el=opener.document.getElementsByTagName(elem)[inx];				var tries=0
    				var cn=opener.document.getElementsByTagName(elem)[inx].className;  k=''+elem+'['+inx+']';
      if(cn){k+=' <i>class="'+cn+'"</i><br>'}
      else{k+='<br>'}
    
    	for(i=0;i<nRule.length;i++){
    		var st=rplc(nRule[i].selectorText,'.',''); 
    		if(st.toLowerCase()==cn.toLowerCase() || st.toLowerCase()==elem.toLowerCase()){st=nRule[i]; tries=1;
    			var s2=new Array(st.style.backgroundAttachment,st.style.backgroundColor,st.style.backgroundImage,st.style.backgroundPosition,st.style.backgroundRepeat,st.style.borderColor,st.style.borderTopColor,st.style.borderRightColor,st.style.borderBottomColor,st.style.borderLeftColor,st.style.borderStyle,st.style.borderTopStyle,st.style.borderRightStyle,st.style.borderBottomStyle,st.style.borderLeftStyle,st.style.borderWidth,st.style.borderTopWidth,st.style.borderRightWidth,st.style.borderBottomWidth,st.style.borderLeftWidth,st.style.margin,st.style.marginTop,st.style.marginRight,st.style.marginBottom,st.style.marginLeft,st.style.padding,st.style.paddingTop,st.style.paddingRight,st.style.paddingBottom,st.style.paddingLeft,st.style.clear,st.style.cssFloat,st.style.cursor,st.style.display,st.style.height,st.style.overflow,st.style.verticalAlign,st.style.visibility,st.style.width,st.style.listStyle,st.style.listStyleType,st.style.listStylePosition,st.style.listStyleImage,st.style.bottom,st.style.left,st.style.position,st.style.right,st.style.top,st.style.zIndex,st.style.borderCollapse,st.style.tableLayout,st.style.color,st.style.font,st.style.fontFamily,st.style.fontSize,st.style.fontStyle,st.style.fontVariant,st.style.fontWeight,st.style.letterSpacing,st.style.lineHeight,st.style.textAlign,st.style.textDecoration,st.style.textIndent,st.style.textTransform,st.style.whiteSpace,st.style.wordSpacing);
    			for(j=0;j<s2.length;j++){	if(	s2[j]	){	k+='<b>'+s3[j]+'-</b>'+s2[j]+'<br>'	}
    						else if(	el.style[s3[j]]	){	k+=''+s3[j]+' - '+el.style[s3[j]]+' <br>'	}
    				}
    		}
    	}
    	if(tries){return k}
    		k+= una(el); return k
    }
    
    function una(el){   var u='';
    	for(n=0;n<s3.length;n++){
    			if(el.style[s3[n]]){u+='<b style="color:green">'+s3[n]+'</b> '+el.style[s3[n]]+'<br>'}
    			else if(el.currentStyle){if(el.currentStyle[s3[n]]){	u+='<b style="color:navy">'+s3[n]+'</b> '+el.currentStyle[s3[n]]+'<br>'}}
    			else if(document.defaultView.getComputedStyle(el, "")[s3[n]]){u+='<b style="color:red">'+s3[n]+'</b> '+document.defaultView.getComputedStyle(el, "")[s3[n]]+'<br>'}
    	}	
    return u
    }
    
    opener.document.onclick=pjt	
    
    </SCRIPT>
    </BODY></HTML>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles