开发者

Find and set css to html element in variable

Suppose i have variable in js and that variable has html as text like

sHtml = "<div id='dvPrint' ><table>";
sHtml += "<tr><td>" + "<img src='" + ImgPath + "' height='900' width='600' border='0'/>" + "</td></tr>";
sHtml += "<tr><td>" + $('#lblTxt').html() + "</td></tr>";
sHtml += "</table></div>";

So how could I set css to img element by jquery because it is stored in js variable.

can i set css in the below way

sHtml = "<div id='dvPrint'><table>";
sHtml += "<tr><td>" + "<img src='" + ImgPath + "' border='0'/>" + "</td></tr>";开发者_开发百科
sHtml += "<tr><td>" + $('#lblTxt').html() + "</td></tr>";
sHtml += "</table></div>";
var $dvPrint = $(sHtml);
$dvPrint.addClass('imageCss');

plzz tell me is there anything wrong. thanks


$('#dvPrint img').css() - http://api.jquery.com/css/


try below with live

   $( '#dvPrint > img ').live ('click', function() {
        $(this).addClass('imageCss');
    });

Note: you must be adding that sHTml on an event, so you can write that event instead of click in above code


If the img element has been outputted to the page, then you can select it and assign a class using Javascript:

var elem = document.getElementById("myimg");
elem.className = "my_css_class";

You need to give the image an ID or some other way of being able to locate it though. There's lots of ways of doing that including walking the DOM.

If it hasn't been outputted to the page, and is just sitting in a Javascript variable, then edit the variable.


That HTML has to be put into the DOM in order to jQuery can work with it. Or you can use it as XML in jQuery.


Why not just use a style attribute when you build up your HTML, eg.

sHtml += "<img style=\""+  ImgCss +"\" src=\"" + ImgPath + "\" />";


why don't you use DOM's API ?

 var newdiv = document.createElement('div');
 $(newDiv).html('your html');
 $(newDiv).addClass('whatever');

okay, misread the question, but I think answer may still apply. Create the img node with create element then insert into div element via DOM.


You can't effectively use jQuery nor any other JavaScript solution to apply a css class to the <img> element, as long as it is just inserted into a string and is not actively part of the DOM.

You could eventually obtain the behaviour you're looking for using jQuery's .live() API, but you have to bound it to an event; that way you're guaranteed that even if your <img> element doesn't exist within the DOM initially, whenever it should be added it would automatically be bound to the event declared in .live() invocation, resulting (when the event fires) in the execution of the code which is interesting to you. If this kind of scenario matches your requirements, then I suggest following the approach indicated by diEcho in this thread.

If, conversely, you only need to apply a css class or attribute to the <img> element in your string, you have 2 options only:

1) When your <img> element still lives only into your sHtml string, you can insert in it the correct css attribute, so whenever you will add sHtml content to the DOM, the image will be there with the correct css styles already;

2) When you already added sHtml content to the DOM, you can use a jQuery selector just like

$("#dvPrint > img").attr("class", "yourCssClass"); 

and it should do the job.

Hth.

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜