0

I would like to set the widths, heights and positions of some images for when they are enlarged in JavaScript. This enlargement will be achieved by linking to the current location with the specific image targeted (e.g example.com#image-1).

My plan is to just use JS to set the sizes and positions of the elements when they are targeted, and to perform this function on page load and on window resize. I would then handle the transition (enlargement of the image) in CSS. I know jQuery has a :target selector but I'm not currently using jQuery.

    <img src="example.png" id="image-1">

    <style>
      #image-1 {
         height: 100px;
         width: 200px;
         position: absolute;
         top: 0;
         left: 0;
      }

      #image-1:target {
        //I would like to set this in js
        //based on screen size etc
       }
    </style>

Any help would be greatly appreciated!

ChrisBingham
  • 35
  • 3
  • 1
    @Quentin: This question is about matching the :target element in a script. I don't think it has to entail modifying stylesheets. You can simply modify the style properties of the element matching document.querySelector(':target') on page load. – BoltClock Jul 03 '17 at 10:51
  • @BoltClock: _“You can simply modify the style properties of the element matching `document.querySelector(':target')` on page load”_ – yeah, but that would still apply those values when the element is _not_ the target any more, right? Because it does not apply them for the pseudo class in the first place, but only uses the pseudo class to find the element, and then sets those values as the _normal_ style for the element. But I suppose OP might want the element to return to its “default” formatting, once it is not the target any more. – CBroe Jul 03 '17 at 10:58
  • @CBroe: That's true. Returning elements to their default formatting on hash change is possible, but then I don't know if that's clunkier than altering the stylesheet itself. – BoltClock Jul 03 '17 at 11:00
  • @Quentin - Modifying the stylesheet does have the desired effect. I do indeed want the element to return to its default styling when it is no longer the target. Thanks for all your help! – ChrisBingham Jul 03 '17 at 11:10
  • @ChrisBingham — If you modify the stylesheet in a way that include the `:target` pseudo-class then it **will** return to its default styling when it is no longer the target. That's the point of the pseudo-class! – Quentin Jul 03 '17 at 11:15

0 Answers0