I'm working with an element that has the following CSS properties:
border: 20px solid;
border-color:#4ea88e;
border-right-width: 10px;
border-left-color: transparent;
I need to change the border-color using JavaScript without affecting the border-left-color. Is there a way to do this without resorting to hacks? If I try the following:
$("#myElement").css('border-color','#ffffff')
It ends up changing both the border-color and the border-left-color.
Utilize regular class attributes instead - jQuery's .css function may not provide optimal performance.
$("#myElement").addClass("coolBorder");
CSS:
.coolBorder {
border-color: #4ea88e;
border-left-color: #ffffff;
}
You could consider attempting this solution...
let originalBorderColor = $("#myElement").css("border-color");
$("#myElement").css('border-color','#ffffff');
$("#myElement").css('border-left-color', originalBorderColor);
Utilize an object within the .css() method
$("#myElement").css({
'border-top-color': '#000',
'border-top-style': 'solid',
'border-right-style': 'solid',
'border-bottom-style': 'solid',
'border-right-color': '#abc',
'border-bottom-color': 'green',
});
Refer to the following example
$('#test').on('click', function () {
$("#myElement").css({
'border-top-color': '#000',
'border-top-style': 'solid',
'border-right-style': 'solid',
'border-bottom-style': 'solid',
'border-right-color': '#abc',
'border-bottom-color': 'green',
});
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="test">Test</button>
<div id="myElement" style="width: 200px; height: 200px; background-color: yellow"></div>Here's a simple trick using CSS
#el {
border: 20px solid;
border-color:#4ea88e;
border-right-width: 10px;
border-left-color: transparent !important;
}
Update: I'm having trouble with this code:
$(document).ready(
$('#el').css('border-color','#111'); // or any other color for that matter
});
https://jsfiddle.net/6rk08kfL/
I don't support the misuse of the !important declaration, but in some cases, it can be useful for applying styles to specific elements within a class.
So, in this scenario, using !important can be helpful for overriding style changes made by JavaScript.
Is there a way to extract and display the user id from JSON values? I'm trying to access the user id value. $('User_id').observe('blur', function(e) { var txt = $('User_id').value; jQuery.ajax({ type: 'g ...
Can anyone explain the meaning of this code snippet: myCollection: Collection|any = null; I'm having trouble understanding it... Does it indicate that myCollection is set to type Collection, (which is an interface), with a default value of null? But ...
My webpage has a div that includes various input fields with values assigned using jQuery. I wanted to print the contents of this div, so I found some code online to help me achieve this. However, when I try to print, the values in the input fields end up ...
Currently, I am facing a challenge with integrating two separate applications. One is a login/registration form written in Node.js, Express.js, React.js, and MySQL. The file structure looks like this: https://i.sstatic.net/th6Ej.png The other application ...
My webpage features custom links (tabs) that display content when clicked. By default, the first tab is selected and its content is shown, while the rest are set to display:none. Clicking on any other link will assign the 'selected' class to it, ...
There is a checkbox that acts like a switch button to toggle a functionality ON/OFF. When it is turned ON, the function should work, and when it is turned OFF, the function should not work. However, the issue arises when the switch is turned ON, the fun ...
In order to efficiently store and retrieve intersecting rectangles, I am currently working on implementing a spatial data structure in JavaScript. My initial approach involves using a Quad Tree to narrow down the search space. However, for dynamic objects ...
Trying to implement jQuery autocomplete on dynamically generated textboxes for the first time. ASMX page code is generating results as expected, but facing issues with JavaScript autocomplete functionality. Even after debugging, the script does not call th ...
Struggling to center a background image? I initially suspected conflicting CSS rules, so I created a simplified demo to troubleshoot. After reviewing examples on SO and beyond, it seems like my approach is correct. Can anyone help identify what I might be ...
I am currently developing a custom directive for an audio player that supports mp3 files. The challenge I'm facing is how to handle multiple instances of the player on a single page. My goal is to ensure that when one player is active, starting anothe ...
One of my main goals is to create a jumbotron with a video that plays, occupying 100% width and 70% height of the screen. However, I am facing an issue where the video follows the scrolling behavior when I don't want it to. Specifically, as I scroll d ...
I'm currently working on creating a grid with synchronized horizontal scrolling across different sections (such as a header and multiple table sections below). Each section should scroll together horizontally, maintaining synchronization using a redux ...
Hello there, I need some assistance with an error that I am encountering. It seems to be unique to me as I'm following a course on YouTube and only I am facing this issue. Can anyone help me out? import Head from 'next/head'; import styles f ...
I'm in the process of verifying a user's identity, and once that is confirmed I aim to add them as a new user in my personal database using the information provided by the authentication server. The issue at hand is that the function createNewAc ...
Let's say a user selects a team from a dropdown menu, triggering a request to an API endpoint. const selectHomeTeamStat = evt => { const { value } = evt.target; getStats(leagueId, value, 'home'); }; In this hypothetical scen ...
It seems like using .bind(this) on a generator function is interfering with determining if the function is actually a generator. Any suggestions on how to resolve this issue? function checkIfGenerator(fn) { if(!fn) { return false; } ...
Having difficulty transmitting data to the Backend. I am trying to send the data f1 to QueryBackend.js. However, when I attempt to use console.log(req.body.f1), it always returns as undefined, even though I can retrieve the value in Services.js. Toolbar.j ...
When the user scrolls, I want to create an overlapping effect using the 'sticky' position and assign a new background color to each div (section). However, despite setting 'top' to 0 for the 'sticky' position, the divs still s ...
I have a div in my code named #map that will be displayed after a certain condition is met in a for loop. <div *ngFor="let message of fullMessagesArr"> <div *ngIf="message.replyMap"> <div #gmap style="width:100px;height:400px"></d ...
I have a JS object with preset data as shown below in the variable var json. I am trying to create a simple HTML web form where I want the user inputs to be added as a new data set within my initial JS object. Here is the initial JS object data. The submi ...