does anyone know how can i get all styles applied to an id using jquery (so i can reuse it later in another tag)? something like
css:
div#myid{
width:100px;
height:100px;}
so i can later do something like:
for (var parts in $('#myid').css())
alert ('all parts of the style' + parts);
$('#myid').attr('class') returns a string of the classes.
You should be able to figure it out from here.
var classes = $('#myid').attr('class').split(' ');
for(var c in classes)
{
alert(classes[c]);
}
It is not jquery but works well:
var style = window.getComputedStyle(document.getElementById('myid'), null);
alert(style.color);
You can replace document.getElementById('myid') by $('#myid').get(0) if you really want to use jquery here.
This works either for a style given by CSS or directly applied on the element with the style attribute.
Not sure.. I had tried attr('class') before and it returned empty. trying now again produces the same result (nearly). i suppose attr('class') in jquery isnt exactly the same as styles defined via id. try running this, let me know if you get different results please:
<html>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function (){
alert($('#myid').attr('class')); // returns 'empty'
var classes = $('#myid').attr('class').split(' ');
for(var c in classes){
alert(c); // returns 0
}
});
</script>
<style>
#myid {
width:100px;
height:100px;
background:red;
}
</style>
<body>
<div id="myid"></div>
</body>
</html>
Related
As I'm making a style template for a website, I'd like to make span elements that from example blocks with a background color. Example:
<span class='colblock'>#FF0000</span>
should result in a block with color code #FF0000 (Red) as background color.
Currently, the following css and JS code is being used (relevant bits)CSS
<style>
span.colblock{
margin:8px;
padding:8px;
display:block;
border:1px solid black;
border-radius:2px;
width:66px;
}
</style>
Javascript (On page bottom, just before body)
<script src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script>
$("colblock").each(function() {
var ccode = $(this).html();
$(this).css("background-color", ccode);
});
</script>
IMO, this is supposed to work, but it does not. Can someone elighten me?
While selecting element by class use . operator. You have error here:
$(".colblock").each(function() {
^ //missed '.' dot
Use following:
$(".colblock").each(function() {
var ccode = $(this).html();
$(this).css("background-color", ccode);
});
In css also you having typo:
<span.colblock{
^ //===> should be removed
See working Example
Use $(this).text() instead of $(this).html()
$(".colblock").each(function() {
var ccode = $(this).text();
$(this).css("background-color", ccode);
});
And in your css <span.colblock should be like this: span.colblock
To select a class, you should use $(".ClassName"), here it will be $(".colblock").
$("colblock") will select elements with tag name "colblock".
Your jquery link seems dead.
src="//code.jquery.com/jquery-migrate-1.2.1.min.js"
This one works as I tested:
src="http://code.jquery.com/jquery-1.2.1.min.js"
Not using JQuery
var the_Span = document.getElementById("colblock");
var span_Text = the_Span.innerText;
the_Span.style.backgroundColor = span_Text;
Here is my code,
<!DOCTYPE html>
<html>
<head>
<style>
.class1 {
color:red;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
</body>
</html>
I need to check whether class1 has used or appended in style tag in jquery? how it's possible..
I am guessing you want to find if the style is provided within the style tag. Just get all the style tags - and see if the class is within the tags
var found_class = false;
$('style').each(function() {
if ($(this).html().indexOf('.class1') > -1) {
found_class = true;
return false;
}
});
I don't know if this can be easily done with jQuery, but here's a 'vanilla' JavaScript way to do it...
Stylesheets have a cssRules property that contains a list of its rules, ordered by the index in which they appear in the stylesheet. So basically, you can 'loop' through the rules and try to find one that matches your search.
The function:
function ruleExists(sheetId, selector) {
var styleSheet = document.getElementById(sheetId);
if(!styleSheet || styleSheet.tagName !== 'STYLE') return false;
styleSheet = styleSheet.sheet.cssRules;
for (var i = styleSheet.length; i--;) {
if(styleSheet[i].selectorText === selector) return true;
}
return false;
}
So just add an id to your stylesheet (I find it more convenient than using document.styleSheets, but you can modify the function to use that instead), and pass the stylesheet's id and desired rule selector to the function. (Of course, if you are using ids, this will only work for inline stylesheets). Here's an example:
Your stylesheet:
<style type="text/css" id="styleShizz">
.class1 {
color: red;
}
</style>
Your JavaScript:
ruleExists('styleShizz', '.class1'); // true
ruleExists('styleShizz', '.class2'); // false
Here's an example JSFiddle:
http://jsfiddle.net/kfubnwx2/5/
JSBIN
you can use have .hasClass() to inspect it in jquery. The method return true or false about whether contain class what you want.
Try this:
if ($(".class1")[0]){
//exists
} else {
// Do something if class does not exist
}
I am getting CSS 'left' property value. now it is set on -50. so i want to get only 50 can this be done with split function or there is another way to do that. Also why split function is not working in my function
<head>
<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.box').click(function (){
var kar=parseInt($(this).css('left'))
var jj= kar.split('')
alert(jj[0])
})
});
</script>
<style>
.container {
margin:auto;
width:500px;
position:relative
}
.box { background:#FF0000; width:200px; height:200px; position:absolute;left:-50px;}
</style>
</head>
<body>
<div class="container">
<div class="box"></div>
</div>
</body>
I think what you are looking for is the Math.abs function:
Math.abs(-50); // 50
Math.abs("-50"); // 50
The split function works on strings and returns an array with all parts of the string separated by the given delimiter. You are giving an empty string as delimiter, which splits your string after each character like this:
"-50".split(""); // result is: ["-","5","0"]
var kar = -50;
kar.split(""); // TypeError: kar.split is not a function
If you are getting a string back like "-50px", then you can do it like this:
var leftAsInt = parseInt("-50px".replace(/[A-Za-z]/g, ""),10);
console.log(Math.abs(leftAsInt)); // 50
Also: there is no jQuery involved in this (besides the .css() function), split and abs are functions of JavaScript's predefined core objects String and Math.
use Math.abs:
var kar = parseInt($(this).css('left')),
jj = Math.abs(kar);
References:
Math.abs.
how about trying this
alert(Math.abs(kar))
hope this helps
Yes, you can use split function
try below code..
var jj= kar.split('-')
I have two Javascript scripts on a site. One is an accordion (show/hide) and the other is a basic script to show/hide based on a hyperlink click. Both scripts work fine independently, but once together on the same page the accordion one stops working: the click to display the items in the accordion stops working. Here's the code:
<link rel="stylesheet" href="[template_url]/js/tinycord/tinycord.css" type="text/css" />
<style>
.inner-boxes .box3, .details1 {
display:none;
}
</style>
<script type="text/javascript">
var parentAccordion=new TINY.accordion.slider("parentAccordion");
parentAccordion.init("acc","h3",0,-1);
</script>
<script>
$(function(){
$(".para").click(function(){
$("#fillit").html($(this).next(".details1").html());
});
$(".details1:first").clone().appendTo("#fillit").show();
});
</script>
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
content of script.js
var TINY={};
function T$(i){return document.getElementById(i)}
function T$$(e,p){return p.getElementsByTagName(e)}
TINY.accordion=function(){
function slider(n){this.n=n; this.a=[]}
slider.prototype.init=function(t,e,m,o,k){
var a=T$(t), i=s=0, n=a.childNodes, l=n.length; this.s=k||0; this.m=m||0;
for(i;i<l;i++){
var v=n[i];
if(v.nodeType!=3){
this.a[s]={}; this.a[s].h=h=T$$(e,v)[0]; this.a[s].c=c=T$$('div',v)[0]; h.onclick=new Function(this.n+'.pr(0,'+s+')');
if(o==s){h.className=this.s; c.style.height='auto'; c.d=1}else{c.style.height=0; c.d=-1} s++
}
}
this.l=s
};
slider.prototype.pr=function(f,d){
for(var i=0;i<this.l;i++){
var h=this.a[i].h, c=this.a[i].c, k=c.style.height; k=k=='auto'?1:parseInt(k); clearInterval(c.t);
if((k!=1&&c.d==-1)&&(f==1||i==d)){
c.style.height=''; c.m=c.offsetHeight; c.style.height=k+'px'; c.d=1; h.className=this.s; su(c,1)
}else if(k>0&&(f==-1||this.m||i==d)){
c.d=-1; h.className=''; su(c,-1)
}
}
};
function su(c){c.t=setInterval(function(){sl(c)},20)};
function sl(c){
var h=c.offsetHeight, d=c.d==1?c.m-h:h; c.style.height=h+(Math.ceil(d/2)*c.d)+'px';
c.style.opacity=h/c.m; c.style.filter='alpha(opacity='+h*100/c.m+')';
if((c.d==1&&h>=c.m)||(c.d!=1&&h==1)){if(c.d==1){c.style.height='auto'} clearInterval(c.t)}
};
return{slider:slider}
}();
I don't think these scripts actually conflict. You are loading the accordion code after you try to use it. Perhaps reorder your script tags.
<script type="text/javascript" src="[template_url]/js/tinycord/script.js"></script>
should go before the use of TINY.accordion which it defines:
var parentAccordion=new TINY.accordion.slider("parentAccordion");
I don't know enough about the meaning of the string arguments in the call to init, but perhaps you could change the script element that creates the accordion and initializes it to happen on document load, for example by delaying it using jQuery's $.ready or by moving it after any elements whose ids appear in those string arguments.
Also the accordion code is unintentionally using a global s. And short names like s can easily collide which is a maintenance hazard even if not the cause of your immediate problem.
var a=T$(t), i=s=0, ...
is not declaring s locally. Perhaps edit it to say
var a=T$(t), s, i=s=0, ...
<script language="javascript">
jQuery.noConflict();
var b=jQuery.noConflict() || $.noConflict;
b(document).ready(function(){
b(".btn-slide").click(function(){
b("#panel").slideToggle("slow");
b(this).toggleClass("active"); return false;
});
});
</script>
Then instead of $ use b to access jQuery.
Can anybody know how to get border-color of a div using jQuery.
$("#divcolor").click(function (){
alert("dsf");
var divcolor = $(this).css("border-color");
alert(divcolor);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divcolor" style="border:#333333 solid 1px;" >
This is the target
</div>
In divcolor variable I am not getting anything.
Using the CSS jQuery function like you did:
http://docs.jquery.com/CSS/css#name
But read this paragraph:
Shorthand CSS properties (e.g. margin, background, border) are not supported. For example, if you want to retrieve the rendered margin, use: $(elem).css('marginTop') and $(elem).css('marginRight'), and so on.
Your mistake is elsewhere. That code works on Chrome and IE.
border-color isn't working for me either (on Firefox), but this works:
$(this).css("border-top-color")
http://jsbin.com/ezefu
I always consider it better practice to work with CSS classes instead of CSS direct. Then you could have something like:
$(this).hasClass("MyClassWithTheBorderColorStyleInIt");
You can write like this
$("#divcolor").click(function() {
var divcolor = $(this).css("border");
divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);
divcolor = divcolor.substring((divcolor.indexOf(' ') + 1), divcolor.length);
alert(divcolor);
});
$("#divcolor").click(function (){
var divcolor = $(this).css("borderColor");
alert(divcolor);
});
Try this one:
$("#divcolor").click(function (){
alert("dsf");
var divcolor = $(this).css("border-color");
alert(divcolor);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="divcolor" style="border:1px solid; border-color:#333333;" >
This is the target
</div>