any idea how to get css property using html method
$( document ).ready(function() {
var ans= $("#hello").html();
console.log(ans);
});
#hi{
color:red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hello">
<div id="hi" >
I am div
</div>
</div>
in this when i use html method ans doesn't contain color:red
<div id="hi" style="red;">
I am div
</div>
Thank you
this when i use html method ans doesn't contain color:red
That's correct. It's because there's nothing in the DOM structure that's being converted to HTML by the html method that contains the color, because it's applied by the CSS stylesheet rules instead.
There is no built-in method in either the DOM or jQuery that will give you an HTML string that converts all of the currently-applied CSS style rules to inline style values. If you wanted something like that, you'd have to build it yourself, using (amongst other things) the css function (if you're building it with jQuery).
You can apply css style to your html tag like below, without css style declaration
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$( document ).ready(function() {
var ans = $("#hello").html();
$('#hi').css('color','red');
console.log(ans);
});
</script>
<div id="hello">
<div id="hi" >
I am div
</div>
</div>
Related
I am facing an issue in jquery , i want to add a css test class in body tag.
My code
(function($) {
if($("#root").length){
$("#root").closest("body").addClass('co_queue_page'); //not working
}
})(jQuery);
<div class="row"> //react code
<div id="root">
<div>
<header>
<div class="container-fluid">...</div>
</header>
</div>
</div>
</div>
what should i do? some help me help?
You don't need to use .closest() method, there is only one tag in HTML document, just do it by selecting the <body> directly:
(function($) {
if($("#root").length){
$("body").addClass('co_queue_page');
}
})(jQuery);
To select the <body> element, using jQuery, you can use:
const element = $(document.body);
const element = $("body");
Then you can use .addClass() to add your custom class dynamically, like so:
element.addClass("co_queue_page");
jQuery fiddle working example
This can be also done without any jQuery, accessing the body DOM element through the document object:
const element = document.body;
element.classList.add("co_queue_page");
Vanilla JS fiddle working example
Please add the below code:
$("body").addClass("class_name");
I want to change a style of a div but the div i'm trying to change doesn't have an id or class. Can someone please help?
This is the div that I want to change:
<div style="display:inline-block">
I expect the result to be something like:
$('#ID/.Class').css({'display': 'block'});
The result I want to get is:
<div style="display:block">
If you could help me that would be great!
If it is impossible by JQuery please tell me how to do it by Javascript (If you tell me how to do it by Javascript please tell me the full javascript so that I could paste it into my code) Thanks!
This could easily be done in jQuery by targeting the div's style attribute, to see that it has the value of inline-block anywhere in it via *. If only one of these divs is needed, you also use first() followed by css() to change the style.
$("div[style*='inline-block']").first().css('display', 'block');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display: inline-block;">Example div</div>
The native JS solution is almost identical, only you use querySelector():
document.querySelector("div[style*='inline-block']").style.display = 'block';
<div style="display: inline-block;">Example div</div>
Here is the Jquery version to filter the div tags that has the inline style of display:inline-block and then change its CSS to display:block. You can use Inspect element to check the output. Hope it helps.
$("div").filter(function(){
return ($(this).css('display') == 'inline-block');
}).css("display","block");
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="display:inline-block">Text</div>
$(".child").css("background-color", $(".child div").val());
<div class="flexbox" id="flexbox">
<div class="child">
<div>#69d2e7</div>
</div>
</div>
I am trying to get the value and make it background-color of that element but i don't know what's wrong
The .val() method is primarily used to get the values of form elements such as input, select and textarea.
You need to use .text() to getting text of div tag.
$(".child").css("background-color", $(".child div").text());
If you have multiple .child in your document you need to use bottom code
$(".child").each(function(){
$(this).css("background-color", $("div", this).text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="flexbox" id="flexbox">
<div class="child">
<div>#69d2e7</div>
</div>
<div class="child">
<div>red</div>
</div>
<div class="child">
<div>green</div>
</div>
</div>
Make sure that you are referencing the script file correctly and that it is truly in the root of your project. If not use relative paths to specify the location. Something like:
<script src="<%= Url.Content("~/scripts/jquery-1.3.2js") %>" type="text/javascript"></script>
Then it does not appear like you are actually calling the document ready function that prevents jquery from running before the document is loaded.
$(document).ready(function(){ // jQuery methods go here... });
I want to target a specified div, but my example for now is only when it has an id.
I want to use pure Javascript
current:
<div id="my_id">hello</div>
<script>
document.getElementById('my_id').insertAdjacentHTML('beforebegin',
'<h3>text</h3>');
</script>
my case:
<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>
How can I target the div that has the bar data-foo attribute ?
You can do this using an attribute selector alongside querySelector:
document.querySelector("div[data-foo='bar']").insertAdjacentHTML('beforebegin',
'<h3>text</h3>');
<div data-foo="bar">hello</div>
<div data-foo="club">hi</div>
I want to add the class attribute on #new-post which is content of <script type="text/template" id="template"></script>
Below is my code which is able to find the content of 'template' but not able to add the class attribute.
$('#template').contents().find('#new-post').addClass('hello');
HTML
<script type="text/template" id="template">
<div id="new-post">
</div>
</script>
A script element contains CDATA, it cannot have child elements (< does not mean "start of tag" inside it (except when that tag is </script>)).
If you want to perform DOM manipulation of the contents of your template, then you must first parse the template into a DOM.
var template = $('#template').text();
var $template = $(template);
$template.addClass('hello');
alert($template.wrap('<div></div>').parent().html());
Why don't you render the template to the dom and then add the class.
Edit:
Please note that your code doesn't work even if the div is inside a normal html tag.
Please refer this fiddle:
http://jsfiddle.net/shyamchandranmec/R7g3S/
$('#foo').contents().find('#bar').addClass('fb');
$("#foo").find("#bar").addClass('foobar');
<div id="foo">
<div id="bar">foo bar</div>
</div>
The class fb wont be added to the div #bar.