How can I use the style input of p-checkbox to change the border and background color of a checkbox?
I already tried [style]="{'background': '#ff0000'}". But this only applies the style to the div which holds the actual checkbox. So its useless. Instead I need to change the border-color and background of the div which has the classes p-checkbox-box and p-highlight.
Note: I cant use CSS here because the colors are dynamic and dependant on the content.
You can use renderer2 to manipulate DOM elements and then add style:
Get all checkboxes using document.getElementsByClassName('p-checkbox-box')
Iterate over each element and add the style you want using renderer2.setStyle()
try this piece of code and add it in ngAfterViewInit():
let chkboxes = document.getElementsByClassName('p-checkbox-box')
for (let index = 0; index < chkboxes.length; index++) {
const element = chkboxes[index];
this._renderer2.setStyle(element,'background-color','#bf2222');
this._renderer2.setStyle(element,'border-color','#bf2222');
}
Related
I would like to set the background image of a div regarding its class. The web I am developing should show a set of game cards. Each card is contained in a div and have a class like this:
<div class="card value suit>
</div>
Being the suit and value for instance clubs and five respectively. So for instance, for a div container like this:
<div class="card seven clubs>
</div>
I wonder if there is a way via CSS to set its background-image to this attribute without writing this for each card:
.card.seven.clubs {
background-image: url("../../images/seven_clubs.png");
}
you can't really have dinamy classes with css only, you need some form or precompiler such as SASS to to convert from thing like
for every number do {
generate number properties
}
for every suite do {
generate suite css properties
}
to actual css code in the form of
.suite1{
property: value;
}
.suite2{
property:value
}
.number1{
property:value
}
or you can use Javascript and dynamically set styles on it
var cards = document.getElementsByClassName('card');
for (var i = 0; i++; i < cards.length){
var thisElementClasses = cards[i].classList;
let imageUrl = '../../images/'+thisElementClasses[0]+'_'+'thisElementClasses[1]'+'.png';
card[i].style.backgroundImage = imageUrl;
}
I'm noot good in english, so the title may seem a bit odd.
I want to use css function attr() like this:
I mean i have a container <div> and an inner <div> that i want to have width depending on data-width attribute. For example this would be great, but this doesnt work:
<div class="container">
<div data-width="70%">
</div
</div>
.container {
width: 600px;
height: 200px;
}
.container div {
width: attr(data-width);
height: 100%;
}
Is there any noJS way to use attributes like that?
UPDATE: Guys convinced me that the JS is the only way to do this :)
That's not a big problem (but that's bad. CSS, why youre so illogical? Is the difference between content:attr(data-width) and width: attr(data-width) so big ?).
One of the guys had an idea to go through the all elements with jQuery.
That's ok, but it is very... local? Don't know how to say it in english.
Anyway, i remaked his code a little bit and here it is:
allowed = ['width','color','float'];
$(document).ready(function () {
$('div').each(function (i, el) {
var data = $(el).data(),style = '';
if (!$.isEmptyObject(data)) {
$.each(data, function (attr, value) {
if (allowed.indexOf(attr) != - 1) {
style += attr + ': ' + value + '; ';
}
})
if (style.length != 0) {
$(el).attr('style', style);
}
}
})
})
Idea is simple:
1. We suppose that style we want to add to an element is the only one. I mean there are no scripts that will try to add some other styles,
2. We create an array of allowed attribute names, we need to avoid using wrong names at the style attribute, for example style="answerid: 30671428;",
3. We go through each element, save its data attributes in an object, check if object is empty, and if not - check every attribute if it is allowed, create a string that contains all styles that we need, and - finally - add our style string to the element as the content of style attribute.
That's all, thanks everybody
I would not advise to use CSS alone since it will not allow you to do what you're looking for... instead use a scripting language (in my case jQuery) to accomplish this functionality for you like so: jsFiddle
jQuery
jQuery(document).ready(function(){
var dataElem; // to store each data attribute we come accross
jQuery('div').each(function(){ //loop through each div (can be changed to a class preferably)
dataElem = jQuery(this); //get the current div
if(dataElem.data('width')){ //make sure it exists before anything further
dataElem.width(dataElem.data('width')); //set the element's width to the data attribute's value
dataElem.css("background-color", "yellow");
}
});
});
HTML
<p>The links with a data-width attribute gets a yellow background:</p>
<div>
w3schools.com
</div>
<div class="me" data-width="50"> <!-- change value to see the difference -->
disney.com
</div>
<div>
wikipedia.org
</div>
Notes on the above:
each, data, width.
Instead of doing data-width, use a class attribute. An html tag can have mutliple classes separated by spaces, so if you wanted to be very precise, you could set up as many classes as you need. For instance:
<div class="w70 h100">
</div>
Then in your css:
.w70{
width: 70%;
}
.h100{
height: 100%;
}
And so on.
Is there any noJS way to use attributes like that?
No, you cannot use CSS to set the width of the element to it's data-width attribute. CSS does not allow for this as attr() is only currently available for the CSS content property which is only available on css pseudo elements (::before and ::after).
How can you achieve this with as little javascript as possible?
This is extremely easy to do using the native host provided DOM API.
Select the elements using Document.querySelectorAll().
Iterate the elements and apply the styles using Element.style which can be retrieved from the data-width attribute using Element.dataset
(Demo)
var items = document.querySelectorAll('#container div'), item, i;
for(i = 0; (item = items[i]); i++) item.style.width = item.dataset.width;
I have a select menu that acts as a navigation to different absolutely positioned divs. whichever option is shown, that div fades into view via the added class having opacity equal to 1. I can get the divs to add the class based on the menu, but I can't seem to remove that 'active' class if the option is not selected- my JS is as follows:
$("#hine").change(function() {
var who=$('#hine option:not(:selected)').val();
var whon=$('#hine option:selected').val();
$(who).removeClass('active');
$(whon).addClass('active');
});
I have a jsfiddle setup here: http://jsfiddle.net/nwT9c/4/
Try this:
var whon = $('#hine option:selected').val();
$('.active').removeClass('active').addClass('inactive');
$(whon).removeClass('inactive').addClass('active');
jsFiddle
You are assigning the value of the not selected elements to the who variable.
Change to :
var who=$('#hine option:not(:selected)');
var whon=$('#hine option:selected');
and you should be good
I have HTML table with 5x5 cells. When hovering on any <td> I need to change the background of a 2x2 block of 4 cells. Here is the code to change the background in the current row.
td.1:hover, td.1:hover + td.1 {
background:#eee;
}
I don't know how to change the background in the row like this:
With CSS only, you could only affect the TD's children or next sibling. I.e., you could extend the background to the TD next to the one you hover but not on another row.
To do what you want to do, you would have to use JavaScript, as you would need to walk up and down the DOM, something CSS does not allow you to do.
To do this with jQuery, for example, try something like this:
$('td').hover(function () {
var t = $(this),
index = t.index(); // the position of the TD in the row, so you can find the one below it
t.addClass('hovered'); // apply hovered class to this TD...
t.next().addClass('hovered'); // ...and to the TD next to it...
t.closest('tr').next().find('td:eq(' + index + ')').addClass('hovered').next().addClass('hovered'); // ...and to the 2 below
}, function () {
// remove the hovered class when no longer hovering
$(this).closest('table').find('td').removeClass('hovered');
});
And in your CSS give whatever styling to the 'hovered' class you want.
DEMO 1
If, however, you want to change the background of the exact same 4 TDs every time you hover over any TD in the table, this can be done purely with CSS. Just give a class name to the 4 cells you want highlighted. Let's call this class 'block2x2' for example. Then your CSS is:
table:hover .block2x2 {
background: #eee; // whatever background style you want
}
DEMO 2
I'd like to tell the browser to assign certain CSS classes to elements matching a particular selector. Can I do it with pure CSS and if yes, how?
Example: I want all the h5 elements inside a div with id sidebar to have the class ui-corners-all
No, that isn't possible with pure CSS.
Only with JavaScript:
// jQuery
$("h5").addClass("ui-corners-all");
// Pure JavaScript
var elements = document.getElementsByTagName("h5");
for (var i=0; i<elements.length; i++)
{
var el = elements[i];
el.setAttribute( "class", el.getAttribute("class") + " ui-corners-all" );
}
There is no way to assign this value to those elements in pure CSS.
You would need to do:
#sidebar h5
{
}
Then copy all styles from ui-corners-all class into this.
Or alternatively, change your ui-corners-all CSS to:
.ui-corners-all, #sidebar h5
{
}
No, you can't. You can however use Javascript (jQuery recommended) to achieve this effect.