I am looking to enhance my HTML element by incorporating additional CSS properties using jQuery, without replacing any existing properties - just building on top of them

Index.html

<html>
<head>
<script
      src="https://code.jquery.com/jquery-3.4.1.js"
      integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
      crossorigin="anonymous"></script>
<!-- jquery-3.4.1.min -->
<script type="text/javascript" src="custom.js"></script>
</head>
<body>
<div class="epic" style="color:red">hello this is title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">
</body>
</html>

custom.js

$( document ).ready(function($){       
   $(":button").click(function(){    
    $(".epic").attr("style","font-size:100px");    
   });        
});

I am looking to change the font size when clicking a button, but also keep the red color intact. Currently, the code I have written changes the font size but removes the color. Is there a way to modify the font size while retaining the red color?

javascriptjqueryhtmlcssajax

Answer №1

To adjust the font size, you can utilize the .css() method:

$( document ).ready(function(){
  $(":button").click(function(){
    $(".epic").css("font-size", "100px");
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="epic" style="color:red">hello this is title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">

Answer №2

Try using the .css method and provide an object of CSS properties. This way, when you call it again, it will simply add the new properties to the existing ones.

The issue with your current approach is that it replaces the entire style attribute every time, leading to the removal of previous properties.

$(document).ready(function() {

  $(":button").click(function() {
    $(".epic").css({
      "font-size": "50px",
      "background-color": "blue"
    });
    $(".epic").css({
      "color":"white"
    });
   });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="epic" style="color:red">title</div>
<div>hello this is title</div>
<input type="button" placeholder="click it" value="click">

Answer №3

One way to maintain the existing CSS class while adding a new one is by utilizing the jQuery addClass() function:

$("button").on("click", function(){
  $(".awesome").addClass("active");
});

Then, in your CSS file:

.active {
    color: red;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How can I populate a dropdown list in JavaScript with JSON data from a file?

I am experiencing difficulties when it comes to parsing JSON files for use in a dropdown list. JSON: { "BD": "Bangladesh", "BE": "Belgium", "BF": "Burkina Faso", "BG": "Bulgaria", "BA": "Bosnia and Herzegovina" } The goal is to populate the dropdownlist ...

javascriptjsondrop-down-menu

Fade one element on top of another using Framer Motion

Looking to smoothly transition between fading out one div and fading in another using Framer Motion, but facing issues with immediate rendering causing objects to jump around. Example code snippet: const [short, setShort] = useState(false); return ( ...

javascriptcssreactjsanimationframer-motion

Stop the page from scrolling when scrolling within a specific DIV to address the [Violation] warning appearing in the console

Initially, it may seem like a duplicate question that has been answered here, but there are additional aspects that need to be addressed. How do I resolve the following [Violation] warning in the Google Chrome console? [Violation] Added non-passive eve ...

javascriptjquerycssmodernizrpassive-event-listeners

Is there a way to retrieve user input without having to submit the form?

I am looking to capture user input without the need for submission, and then pass it through an AJAX method as a parameter to an action. Despite trying various methods, I have not been able to find a solution. Below is the code snippet: <input type="t ...

htmlasp.netajaxasp.net-mvcrazor

What is causing this error/bug to show up in Angular?

I encountered an error while working on my Angular project that incorporates both front-end and back-end development with Python Flask. Even though the page updates correctly, a database-related error is being displayed in the console. Below are the snippe ...

javascriptpythonangulartypescript

What is the best way to execute a function based on its name, which is provided as a parameter

Is there a better way to call a function by its name, passed as a parameter in JavaScript? Here's my scenario: I have a switch case where I need to set the data for an API ajax call. Once the ajax call is complete, I want to call a specific print func ...

javascriptjqueryajaxfunctionecmascript-6

Is there a way to automatically convert English numbers to Persian/Arabic as soon as a user types them into the input tag?

Currently, I am working with Vuejs and trying to hide the user's characters in an input tag and replace them with my own characters (specifically numbers). I have attempted using @onchange, Watch, as well as getters and setters within computed proper ...

javascripthtmlvue.js

Updating variable values using buttons in PHP and Javascript

I've implemented a like/unlike button along with a field displaying the number of likes. The code below uses PHP and HTML to echo the variable that represents the total number of likes: PHP-HTML: <span>likes: <?php echo $row['likes&apo ...

javascriptphponclickincrementdecrement

Navigating AJAX Pages - Maximize the Potential of #home and Other Sections

I am working on creating AJAX pages using a tutorial I found on Tutorialzine. The script I am using loads pages using AJAX but it requires specifying the page number in the URL like http://example.com/#page1 or http://example.com/#page2. Is there a way t ...

javascriptphpjqueryhtmlajax

Using node-remote in Node.js application with NW.js

Does anyone have an example of how "node-remote" functions work when running certain logic from the server in an application? After adding "node-remote" : "hostip" to package.json, what should the server provide? Should it be a .js file with the functions ...

javascriptnode.jswebkit

The use of .setInterval() and Drupal.attachBehaviors is resulting in my JavaScript file running multiple iterations simultaneously

I am facing an issue while delivering ajax content to a page and needing to reattach Drupal behaviors to that content. My current approach involves using jQuery to poll the server every 5 seconds for data, which is then displayed on the page. Drupal.behav ...

jquerydrupal-6

Load public and admin code dynamically using AJAX for WordPress, ensuring compatibility on all fronts

I'm facing an issue with loading front-end and admin area code in my WordPress plugin. I want the file and class responsible for creating the admin area to load only on the admin side, and the ones needed for the front-end to load exclusively on the f ...

phpajaxwordpress

Enhancing the TYPO3 link parser to dynamically create AJAX links

As I dive into this topic, my quest for answers seems never-ending. The elusive parser within TYPO3 continues to evade me despite weeks of searching. (I believe it's fair to refer to this component as a "parser," though I'm open to correction. I ...

ajaxhyperlinktypo3

Angular - The JSON passed to the fromJSON method was not valid, as an unexpected token was found at the first position

I'm encountering some challenges while trying to execute a post request to my Spring Rest service hosted on localhost. Although the request and the service are functioning properly, the issue I am facing is that I continuously receive an error indica ...

javascriptangularjsjsonrest

File in Node JS appears to be empty upon reading

My goal is to track the location of tweets in separate JSON files for each Twitter ID I monitor. The code snippet below is executed for every tweet, creating a new JSON file for each unique ID and appending the location data: console.log("@ " + tweet.user. ...

javascriptnode.js

Send form using ajax technology

I am in the process of developing a website using GitHub pages and Jekyll. One of the key features I want to include is a contact form that allows users to send emails. To implement this functionality, I have decided to use Formspree. After creating an ac ...

javascriptjqueryhtmlajaxgithub-pages

Expandable Navigation Menu for Desktop Websites: Utilizing a Small Icon for a Full Width and Height Dropdown Menu upon Toggle Click (Utilizing Bootstrap 4)

Struggling to achieve a full-width and height display of my hamburger menu on toggle button click. I aim to have a hamburger with small icons on the left side of the screen, which, when clicked, should reveal a transparent full-width and height layout with ...

phphtmlcsswordpressbootstrap-4

How can I create an image that spans the entire width of the screen, Swiper?

var swiper = new Swiper('.swiper-container', { pagination: { el: '.swiper-pagination', }, }); html, body { position: relative; height: 100%; } body { background: #eee; font-fami ...

javascripthtmlcssswiper.js

Jest snapshot tests using react-test-renderer encounter null references in refs

Having an issue with manually initializing the Quill editor in componentDidMount and encountering Jest test failures. It seems that the ref value I am receiving is null in jsdom. There is a related issue here: https://github.com/facebook/react/issues/7371, ...

javascriptreactjsjestjs

Example of a chat server code using NodeJS

I'm looking to add a chat module to my web application. After searching on , I found several chat modules but none of them have clear examples on how to implement them in my project. Can someone share a tutorial that is based on existing NodeJS modul ...

javascripthtmlnode.jschat