Using jQuery to remove all inline styles except for a specific one

Just a quick inquiry: Our Content Management System (CMS) utilizes CKEditor for clients to modify their websites. The front-end styles include the use of a pre tag, which we have customized to our desired appearance. However, when their team members copy and paste content from another site, it alters the styling due to inline styles. To address this issue, I created a script to eliminate all inline styles:

$("pre").attr({style : ""});

Nevertheless, I'm encountering difficulties as certain pre tags require the text-align:center; inline style. How can I adjust the script to only permit the text-align property on the pre tag?

javascriptjqueryhtmlcss

Answer №1

Iterate through the tag and search for them

$("pre").each(function(){
    var isCenter = (this.style['text-align'] == 'center');
    $(this).attr({style : ""});
    if (isCenter){
        $(this).css({'text-align': 'center'});
    }
});

Answer №2

Although Musa's response is satisfactory, the following solution leans towards jQuery:

$('pre').each(function () {
  var $content = $(this);
  var alignment = $content.css('text-align') == 'center' ? 'center' : '';

  $content
    .removeAttr('style')
    .css('text-align', alignment);
});

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

Guide on adding a unique ID for every table by inserting a div

I am currently working on a website that contains multiple tables on each page. My goal is to implement a scroll bar at the top, customized for each table. After searching online, I came across this helpful solution: http://jsfiddle.net/simo/67xSL/ I have ...

jquery

Ways to eliminate the yellow highlighting on a row

In my current application, I am incorporating jqGrid and aiming to apply custom styling to it. To start, my objective is to eliminate the yellow highlighting effect that appears when clicking on a row in the jqGrid css. Despite my attempts, I have been u ...

jquerycssjqgrid

Retrieve the attribute value from an HTML element in a JSON response using JavaScript

I received a JSON request result containing a blogger post. // API callback posts( { "version": "1.0", "encoding": "UTF-8", "entry": { "title": { "type": "text", "$t": "Vimeo Embed Video Post" ...

javascriptjqueryjson

Certain sections within a Formik form are failing to update as intended

I have successfully implemented a custom TextField wrapper for Material-UI fields, but I am facing an issue with native Material UI fields not updating the form data upon submission. Below is the relevant code snippet along with a link to a code sandbox d ...

javascriptreactjstypescriptmaterial-ui

Revert button design to default after second click

Looking for some assistance here. I have a button that toggles between displaying and hiding information. When the information is displayed, it should have one style, and when it's hidden, it should have another. Currently, I'm able to change the ...

htmlcssbutton

What is the best way to create a delay so that it only appears after 16 seconds have elapsed?

Is there a way to delay the appearance of the sliding box until 16 seconds have passed? <script type="text/javascript"> $(function() { $(window).scroll(function(){ var distanceTop = $('#last').offset().top - $(window).height(); ...

javascriptjquery

Issue with submitting form on PHP page

I need some help with my signup form: <h2>Signup</h2> <form action="actions.php"> Email:<br> <input type="text" name="email"> <br> Password:<br> &l ...

phphtml

Transferring an array from PHP to JavaScript via an Ajax response

Welcome to my first post on stackoverflow. I usually find answers from existing posts, but this time I'm facing a problem that none of the suggested solutions have been able to fix. Currently, I have a JavaScript function that makes an AJAX request t ...

javascriptphpajax

Different Line Thickness in Dropdown Menu

Is there a way to adjust line heights in CSS within a drop down menu? I have attempted to change the font sizes of each element, but the new font size does not seem to take effect once an option is selected. Any suggestions would be greatly appreciated! & ...

javascripthtmlcssselectdrop-down-menu

Retrieve the initial occurrence that meets the conditions across three columns in MySQL

I am currently utilizing a NodeJS REST API that connects to a MySQL database. Within this database, there is a specific table we will refer to as Table_01: | C_0| C_1| C_2| C_3| | 1 | A1 | B1 | 1 | | 2 | A1 | B2 | 0 | | 3 | B1 | A1 | 0 | | 4 | A2 | ...

javascriptmysqlnode.jsjsongreatest-n-per-group

a solution to the focus/blur issue in Firefox's browser bug

I have created the following script to validate if a value entered in an input field already exists in the database. $('#nome_field').blur(function(){ var field_name=$('#nome_field').val(); $.ajax({ url: " ...

javascriptjqueryfirefoxonbluronfocus

What is the best method for arranging drop-down menu options in alphabetical order?

Is there a way to organize the options alphabetically in the dropdown menu of Material-UI? I understand that arrays can be sorted easily using arr.sort(). However, when I try const options = [...].sort(), I still see unsorted values in the dropdown menu. ...

javascriptreactjsmaterial-ui

What is the process by which React recreates the React element tree (virtual DOM) with every state update?

From what I've gathered, every time a state is updated in React, it generates the react element tree (virtual DOM) and then compares it with the new one using a diffing algorithm. However, there's something I find puzzling. Let's say we hav ...

javascriptreactjs

What is causing the Angular-UI TypeAhead code to display all items instead of filtered items?

I have been experimenting with the angular-ui typeahead directive to create a filtered input box that only shows items based on what has been typed. However, my current code is displaying all the items instead of just the filtered ones. If you'd like ...

javascriptangularjsangular-uitypeaheadangular-ui-typeahead

Unable to successfully download zip files using Ajax in the MVC framework

I need to trigger the download of a zip file that contains .pdf files using an ajax call. The issue I'm encountering is that everything seems to be working fine except for the actual downloading of the zip file. public FileResult DownloadZip(string[] ...

javascriptc#jqueryajaxmodel-view-controller

What is the best way to dynamically apply the "active" class to a link when it is clicked

Here is how my vue component looks: <template> <div> ... <div class="list-group"> <a :href="baseUrl+'/message/inbox'" class="list-group-item"> Message </a> ...

javascriptvue.jsvuejs2vue-component

Embedding a video element results in an unexpected increase in height

When I insert an HTML5-Video element into a div, it results in the wrapper having a height larger than the video itself. The wrapper is 7px taller than the actual video source, without any min-height set. Check it out! (Scroll down to the Video) The vide ...

htmlcsshtml5-video

The html button adorned with a variety of CSS styles

I've been attempting to create a button for a message system that displays an orange dot when there's a new message, but I'm having trouble getting it to work. Do you think it's possible? Check out the button below: <input type="bu ...

htmlcss

The size of the dropdown adjusts according to the changes in the page size

Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...

htmlcssbootstrap-4

JavaScript code for modifying style properties

Is there a way to modify this function so that when the heading is changed successfully, a "Change Back!" button appears? And then, with a click on the button, the heading is reset and the button disappears again. function changer () { var textArea = ...

javascripthtmlcss