Apply Class According to Style Property

My current CMS does not seem to apply a class name when an element is floated left or right. Instead of delving into the TinyMCE code, I would prefer to use jQuery to solve this issue.

Currently, when aligning an image to the left or right, inline styles are added directly to the image tag like this:

<img src="image.jpg" style="float:left">

I had hoped to automatically add a class name of "alignleft" to elements with this style applied. Unfortunately, my attempt at using jQuery did not yield results:

$( 'a[ style=' + 'float: left;' + ']' ).addClass( 'alignleft' );

Any suggestions on how to approach this?

jqueryhtmlcss

Answer №1

To identify elements with the CSS property float: left, you can filter them and then add the class name alignleft:

$('a, img').filter(function(){
    return this.style.float === 'left';
}).addClass('alignleft');

This method eliminates the need for the style attribute to be exactly style="float: left;", including whitespace.

If the float: left style may be applied from an external stylesheet or in the page's head section, you would have to use jQuery's css() method:

$('a, img').filter(function(){
    return $(this).css('float') === 'left';
}).addClass('alignleft');

For more information, check out these references:

Answer №2

Make sure to add double quotation marks after the = sign and before closing ]. Also, use style~= instead of = to indicate that the style attribute contains the string "float: left".

$( 'a[ style~="' + 'float: left;' + '"]' ).addClass( 'alignleft' );

You can see a working example on jsFiddle.

For those who are concerned:

If you're worried about distinguishing between float: left or float:left with an attribute selector, try this:

$( 'a[style*="' + 'float:left' + '"], a[style*="' + 'float: left' + '"]' ).addClass( 'alignleft' );

This will work whether there is a space or not in the attribute parameter. To understand better, check out this link. Some developers may argue it won't work for multiple spaces in the attribute parameter. Feel free to use whatever method suits your needs.

EDIT. Learn more about selectors here.

Answer №3

$('img[style*="float"][style*="left"]').addClass('alignleft');

UPDATE It appears that the code provided may not work if a border-left is also present.

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

Adjusting the size of an HTML5 canvas using a class function when a resize event occurs

I'm attempting to adjust the size of a canvas element using a resizeCanvas() method triggered by a resize event. When I directly call the method, the canvas resizes without any issues. However, when the event handler triggers subsequent calls, I encou ...

javascripthtmlcanvas

Tips on customizing the appearance of mat-card-title within a mat-card

Is there a way to truncate the title of a mat card when it overflows? I tried using the following CSS: overflow:hidden text-overflow:ellipsis white-space: nowrap However, the style is being overridden by the default mat-card style. I attempted to use mat ...

javascripthtmlcssangularfrontend

Design a unique border for a div element that extends a top-border all the way through the header and a bottom-border that

I am trying to achieve the design displayed in this mockup: https://i.sstatic.net/sYEPu.png Here is my current progress: https://codepen.io/raney24/pen/VOmjBY .header-border { width: 100%; margin-bottom: 10px; border-left: red solid 1px; border ...

htmlcssborder

Please click on the element located in the top right corner of the image

I am attempting to place a font icon in the top right corner of some images, with the intention of only triggering an event when I click on the icon. However, my current setup causes the entire image to trigger the click event. How can I restructure this t ...

htmlcssbootstrap-4

Having trouble with replacing an entire div selector with a new div after using Jquery's .html method?

I've searched high and low, but can't find a reference. However, this should be obvious. Two select lists If the result of the first list is Australia, then keep the second list. If it's not Australia, replace the second list with an inpu ...

jqueryjquery-selectors

Safari is not functioning properly with the css display:none property

My HTML code looks like this: <div id="loadinganimationsearch"> <div style="color: #28ABE3;font-size: 14px;float: left;">Fetching Textbooks</div> <div id="block_1" class="barlittle"></div> <div id="block_2" ...

htmlcsssafari

What is preventing me from applying styles to the first word in my Angular ngFor iteration?

I'm currently attempting to customize the initial word of a string within my Angular ngFor loop. Strangely, the class gets applied but the style defined in my CSS file is not. Inline styling also does not seem to work - any ideas why? This is the CSS ...

htmlcssangulartypescript

Struggling to create consistent spacing between stacked bar charts in React using Recharts?

I have successfully created a stacked bar chart, but I am struggling to add a 10px spacing between two vertical stacked bar charts. I tried using barGap={8880} and barCategoryGap={100}, but it did not work as expected. Below is the code snippet and stackbl ...

javascripthtmlcssreactjsreact-chartjs

Issue with input-group background display in bootstrap 4

My new computer is running on Windows 11 with Chrome version 97. There seems to be a bug in the original bootstrap code, as evidenced by the attachment. The issue can be seen on the Bootstrap website By adding "border-radius:0!important" to ".input-group ...

cssbootstrap-4windows-11

Refresh the html page periodically by utilizing ajax every X seconds

Recently, I came across a post discussing the topic of automatically refreshing an HTML table every few seconds. The post can be found here. Currently, I am working with Rails and I want to achieve a similar functionality. However, I specifically want to ...

javascriptjqueryhtmlruby-on-railsajax

Displaying error message dynamically using ajax

I am looking to customize the way error messages are displayed on my form. Instead of having one generic div above the whole form, I want the error messages to appear next to each input field. <div id="response"><!--This section will show error ...

javascriptphpjqueryhtmlcss

Filtering and displaying a nested array with underscore, jquery, and handlebars: A guide

I am facing the challenge of filtering specific data from a nested structure: data = { grouplist: [ {name: "one", optionlist: [{optionitem:"green"},{optionitem:"red"}]}, {name: "two", optionlist: [{optionitem:"yellow"},{opt ...

jqueryfilterunderscore.jswhere-clausehandlebars.js

Style your toolbar the Google way with CSS and HTML

Trying to replicate the Google-style toolbar found on G-mail and other Google services has been a challenge for me. I have experimented with creating this toolbar using a formatted list and nested div elements within a single container, but I encounter th ...

csshtmlhtml-lists

Using React to Dynamically Render a Form Select with Two Pre-Defined Options (and mapping the remaining options)

Being relatively new to front-end development, especially React, I'm typically more of a back-end developer. Recently, the other developers on my team have left the company, leaving me alone to figure out the entire stack of our platform written in Re ...

htmlreactjs

Discovering how to locate a div element in one component from a separate component using Vue.js

Imagine having multiple Vue.js components in one project. <loginFields></loginFields> <submitButton></submitButton> Now, when the submitButton (which is a div with a unique id) is clicked, I want to initiate a method that checks t ...

javascriptjqueryvue.js

Leveraging composer to enhance the organization of my dependencies

As I organize my files for my PHP-based website, I've turned to composer for assistance. One issue I've encountered is loading front-end dependencies like jquery into my pages, specifically the index.php. In the past, I manually specified each js ...

javascriptphpjquerycomposer-phpbower

Unpacking jQuery's fancybox collection

Can anyone guide me to where I can locate the unpacked version of Jquery.fancybox-x.x.x.pack? I attempted to fix the code formatting manually in order to comprehend it better, but I'm still finding it challenging... ...

javascriptjqueryfancybox

Encountering issues with CSS selectors when using Selenium WebDriver

I am encountering an error with the following code: elem = new Array() elem = driver.findElements(By.CssSelector('input')); What could be causing the issue in the code above? If I have an HTML form like this: <form role="form" method="post ...

javascripthtmlseleniumselenium-webdrivermocha.js

I successfully created a Chinese writing practice deck in Anki, which is functional on the desktop version but unfortunately not compatible with Ankidroid

While AnkiDesktop is functioning properly, there seems to be an issue with character encoding in Ankidroid. Despite trying numerous solutions, the problem persists. The character length displays correctly in Anki Desktop, but not in Ankidroid. For example ...

javascripthtmlcssanki

Attempting to showcase the text within an <a> element on a <canvas> element while ensuring there are no noticeable visual distinctions

Imagine having this snippet of code on a webpage: elit ac <a href="http://www.ducksanddos/bh.php" id='link'>Hello world!</a> nunc Now, picture wanting to replace the <a> tag with a <canvas> element that displays the same ...

javascriptcsshtmlcanvas