0

Hey I want to get the width of a div and add it to a css class as border width. Thanks in advance!

Here is the div:

<div id="web" class="well">
<div style="padding:19px">
<a style="text-decoration:none;" class="boxclose web_close"></a>
<h2 style="color:#242424; font-weight:bold;"><em style="color:#4fd886;">&mdash;</em>  Web.</h2>
<p></p>
</div>
</div>

and here is the CSS class:

.well:before { 
    width: 0;
    height: 0;
    content: "";
    border-bottom: 81px solid #fff;
    border-left:/*WIDTH HERE*/ solid transparent;
    position: absolute;
    bottom: 100%;
}
Aeroh
  • 3
  • 3
  • 1
    Are you using the border for spacing? Why is it transparent? What have you tried? – ajmajmajma Apr 17 '15 at 13:54
  • if you hit get div width javascript, you will find it on the very first answer .... http://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div – Vitaliy Terziev Apr 17 '15 at 13:57
  • possible duplicate of [How to find the width of a div](http://stackoverflow.com/questions/4787527/how-to-find-the-width-of-a-div) – Vitaliy Terziev Apr 17 '15 at 13:58
  • okay and how can I add this to the class ?? and @ajmajmajma its a angled border – Aeroh Apr 17 '15 at 14:02
  • So to get the width, you'd want to do it with javascript. But you need to figure out when you want to get it/what events fetch it, and does it change on resize events? then you'd apply it with javascript as well (or jquery). You can do something like document.getElementById("mydiv").offsetWidth to find the width in JS – ajmajmajma Apr 17 '15 at 14:14
  • It's also worth mentioning (someone please correct me if this has changed) psuedo elements are not part of the dom, you will not be able to manipulate the css on them with javascript directly. You might consider a slightly different approach. There are "hack" ways of doing it - I found an article here http://pankajparashar.com/posts/modify-pseudo-elements-css/ , can't say I would recommend that though, but it's interesting none the less. – ajmajmajma Apr 17 '15 at 14:36
  • @ajmajmajma this is what I want to make and my css works but it's not responsive so on other resolutions the border ist to long and so I wanted to change the width dynamically to the div width with js. The div width ist 50%. http://prntscr.com/6uudel – Aeroh Apr 17 '15 at 14:51
  • Would be much easier on you if you were not using a pseudo element. – ajmajmajma Apr 17 '15 at 15:17
  • otherwise it won't work – Aeroh Apr 17 '15 at 15:23

1 Answers1

0

I didn't mention you want border any one sided like border-left, right etc. or border in all direction. I've tried to solve your query please find fiddle link below..

find js fiddle demo

.well{
position:relative;
float:left;
}
.well:before { 
width: 100%;
height: 100%;
content: "";
position: absolute;
top: 0;
left:0;
border:1px solid red;
}
Ganesh Yadav
  • 2,607
  • 2
  • 29
  • 52
  • this is what I want to make and it works but ih have to be responsive so the width of the div ist 50% and I want to get it in px and add it to the class http://prntscr.com/6uudel – Aeroh Apr 17 '15 at 14:47
  • EDIT: the slants are the border – Aeroh Apr 17 '15 at 14:53
  • I think you want like this http://jsfiddle.net/locateganesh/rzyhggtw/5/ please write css transform extension for browser support like -webkit-transform: scale(0, -5deg); and also I have kept main element width 80% and it is responsive. if you want you can change width percentage as per requirements.. – Ganesh Yadav Apr 18 '15 at 13:35