how to apply css all element whose starting element is same? - javascript

can you please tell me how to apply css all element whose starting element is same.Example I want to apply css whose starting characters of ID is "abc" ?

You can use pure CSS which is better:
[id^="abc"] {
// Your styles here
}
If you're looking for jQuery solution then you can use attribute starts with selector along with .css():
$('[id^="abc"]').css("Your styles here");

You can use Attribute Starts With Selector [name^="value"]
jQuery, css function
Live Demo
$('[id^=abc]').css('key', 'value');
css
Live Demo
[id^="abc"] {
background-color:red;
}

You can do it easily via css itself:
[id^="abc"] {
// mention your style here
}
Insert the above code in your css stylesheet file.

Related

JavaScript: Select an element to a div and update styling

I need to add styling to a DIV element using JavaScript. I have the following DIV in my document:
<div class="RnEpo Yx5HN " role="presentation">
The script that I have tried is:
WebElement = document.querySelectorAll("div[class='RnEpo Yx5HN ']");
WebElement.style='height: 10000px;'
WebElement.setAttribute("height = 1000px;");
I want to achieve the same styling as this CSS:
.RnEpo Yx5HN
{
height: 100000px;
}
To achieve what you require, first replace querySelectorAll() with querySelector() seeing that your only need to select the first matching element.
Consider also revising your selector from div[class='RnEpo Yx5HN '] to a more robust selector in the form of div.RnEpo.Yx5HN which is to say:
Select div elements that have classes any ordering of class RnEpo and Yx5HN
Lastly, revise the way that you're applying the inline style so that the height attribute is directly specified on the WebElement style object.
These changes make the call to setAttribute() redundant. Note also that; setAttribute() takes two arguments, and the DIV element does not have a native height attribute.
Here's a working snippet showing this in action:
/* Use querySelector() to select first matching element and use dot notation syntax to select div with both classes */
const WebElement = document.querySelector("div.RnEpo.Yx5HN");
/* Apply inline style, avoid invalid setAttribute call */
WebElement.style.height = `10000px;'
<div class="RnEpo Yx5HN" role="presentation">

Find <a> Element href #value in JavaScript or Jquery

This is my link
Generate Report
It can be executed as
$('a#myreport').click(function () {/* codes */});
or
document.getElementById("myreport")
But how can I execute this from 'href' (element as 'report') instead of ID?
Using jQuery, you can use the attribute contains selector to achieve it easily, look:
$("a[href*='report']").click(function () {
/* codes */
});
Look at my jsFiddle live example: http://jsfiddle.net/ynevet/K4zZH/
From jQuery docs:
Selects elements that have the specified attribute with a value
containing the a given substring.
This is easy:
$('a[href=#report]').click(function() {
/* your code */
});
You can access attributes with [attrname=attrvalue]. Of course, you can omit the attribute-value and just select elements with any attribute set.

How to add classes from a selector string?

I have several CSS classes in the form of a selector, for example .myclass.myclass2 and I want to apply both classes to an element.
I could .split() the string and apply each class with .addClass(), but before I do, I'd like to know if there's a "native" jQuery function to do this kind of thing or if someone has written a function to handle it.
To better explain: I want a function that I can pass it a CSS selector and it'll add the classes to an element. Like $('#myelem').addClass('.myclass.myclass').
(I would also love it to handle other CSS selectors such as #myid, but I fear that's asking too much and I'd probably need a full parser function.)
addClass takes a space separated string, so all you need to do is replace dots with spaces:
var classes = '.myclass.myclass2';
$(element).addClass(classes.replace(/\./g,' ').trim()))
You can add this to your script:
$.fn.oldAddClass = $.fn.addClass;
$.fn.addClass = function(x){
if(typeof x == 'string'){
this.oldAddClass(x.replace(/\./g, ' '));
}else{
this.oldAddClass(x);
}
}
Then call addClass() with your dot :
$(el).addClass('.class1.class2');
Fiddle : http://jsfiddle.net/8hBDr/
create two classes inside style tag like this
.a {
backgroud-color:red;
}
.b{
color:blue;
}
</style>
now add your jquery codes
then inside javascript code
<script type="text/javascript">
$(document).ready(function(){
$('#mydiv').addClass(a).addCLass(b);
or
$("#mydiv").addClass({a,b});
or
$('#mydiv').addClass(a);
$('#mydiv').addClass(b);
});
</script>
here is the html
<html>
<body>
<div id="mydiv"></div>
</body>
</html>
You cannot add css selectors (like #elemid.myclass) directly to an element in native jQuery. The example below shows how to add multiple classes using a space delimited string.
$(elem).addClass("myclass mycalss2")
And the documentation:
http://api.jquery.com/addClass/

Change CSS rule in class using JQuery

I have a class in CSS
.Foo
{
width:20px;
}
Using Jquery I would like to do something similar to this on an event:
$(".Foo").css("width", "40px");
This doesn't work. Is this the wrong approach? Should I use addClass() and removeClass()?
EDIT: I figured out my problem. This command does in fact work. In my particular application I hadn't created the elements using the class before I used the command, so when they were created nothing was changed.
Basically this command doesn't change the CSS style rule, just the elements using the class.
You can change a CSS style rule. You need to look at:
document.styleSheets collection
styleSheet.cssRules property (or styleSheet.rules for IE7 and IE8)
rule.selectorText property
rule.style property
For example:
var ss = document.styleSheets[0];
var rules = ss.cssRules || ss.rules;
var fooRule = null;
for (var i = 0; i < rules.length; i++)
{
var rule = rules[i];
if (/(^|,) *\.Foo *(,|$)/.test(rule.selectorText))
{
fooRule = rule;
break;
}
}
fooRule.style.width = "40px";
Working demo: jsfiddle.net/kdp5V
you could add the styling manually to the header with jquery:
$('head').append('<style id="addedCSS" type="text/css">.Foo {width:40px;}</style>');
then change it on an event like e.g. so:
$(window).resize(function(){
$('#addedCSS').text('.Foo {width:80px;}');
});
jQuery.css will find all existing elements on the page that have the Foo class, and then set their inline style width to 40px.
In other words, this doesn't create or change a css rule -- if you dynamically add an element with the Foo class, it would still have a width of 20px, because its inline style hasn't been set to override the default CSS rule.
Instead, you should use addClass and removeClass and control the styles in your static CSS.
Yes, you should use addClass and removeClass to change the styling. In your css, define a couple of different classes and switch between them.
You should be selecting an element with jQuery. You're aware that you aren't selecting the CSS class itself, correct?
Once you have an element with class="Foo", you can select it as you have, and either set css properties manually like you're trying to do, or you can use add class like so:
$(".Foo").addClass('Foo');
Granted of course, since you're selecting the same class that you're adding, it doesn't really make sense.
I got thsi example in CSS api help in JQuery API.
this worked for me : http://jsfiddle.net/LHwL2/
for complete help read the css api at http://api.jquery.com/css/
Try using multiple styles
.FooSmall
{
width:20px;
}
.FooBig
{
width:40px;
}
$('#theTarget').removeClass('FooSmall').addClass('FooBig');
This may work for you.
$(".Foo").css("width", "40px");

How to add `style=display:"block"` to an element using jQuery?

How to add style=display:"block" to an element in jQuery?
$("#YourElementID").css("display","block");
Edit: or as dave thieben points out in his comment below, you can do this as well:
$("#YourElementID").css({ display: "block" });
There are multiple function to do this work that wrote in bottom based on priority.
.css()
Set one or more CSS properties for the set of matched elements.
$("div").css("display", "block")
// Or add multiple CSS properties
$("div").css({
display: "block",
color: "red",
...
})
.show()
Display the matched elements and is roughly equivalent to calling .css("display", "block")
You can display element using .show() instead
$("div").show()
.attr()
Set one or more attributes for the set of matched elements.
If target element hasn't style attribute, you can use this method to add inline style to element.
$("div").attr("style", "display:block")
// Or add multiple CSS properties
$("div").attr("style", "display:block; color:red")
JavaScript
You can add specific CSS property to element using pure javascript, if you don't want to use jQuery.
var div = document.querySelector("div");
// One property
div.style.display = "block";
// Multiple properties
div.style.cssText = "display:block; color:red";
// Multiple properties
div.setAttribute("style", "display:block; color:red");
Depending on the purpose of setting the display property, you might want to take a look at
$("#yourElementID").show()
and
$("#yourElementID").hide()
If you need to add multiple then you can do it like this:
$('#element').css({
'margin-left': '5px',
'margin-bottom': '-4px',
//... and so on
});
As a good practice I would also put the property name between quotes to allow the dash since most styles have a dash in them. If it was 'display', then quotes are optional but if you have a dash, it will not work without the quotes. Anyways, to make it simple: always enclose them in quotes.
If you are using BS5 and Tabulator I found that I had to add position: static to the cell AND add it to the button.
So, I added the following CSS:
.table-responsive .dropdown,
.table-responsive .btn-group,
.table-responsive .btn-group-vertical {
position: static;
}
and on the Tabulator div I have:
<div id="myTable" class="table-sm table-responsive"></div>
and finally on the event I do:
myTable.on("dataProcessed", function(data){
$('[tabulator-field="my_fancy_field"]').css("position", "static");
});
You will need some way of finding the right cell. I used the field that I am loading the data from.
I then end up with (on most rows) something that looks like this:
And on the last row it pops upwards like this:

Categories